我正在尝试在一个更大的项目中考虑解决这个问题的方法，但将这个小例子放在一起希望找到解决方案..
通过创建一个新的 meteor 项目(使用 meteor 1.0.3.1)并添加 mizzao:bootstrap-3 并使用以下文件来组合该示例:
测试.html
<head>
<title>test</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
{{> example}}
</div>
{{> controls}}
</div>
</body>
<template name="example">
<div class="col-xs-{{zoom}}">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span data-toggle="tooltip" data-placement="auto" title="Some text that will appear in the tooltip (which should be centered above or below this span) when hovering over the this span">Text that can spill out</span></h3>
</div>
<div class="panel-body">
<p>Foo</p>
</div>
</div>
</div>
</template>
<template name="controls">
<button id="in">+</button>
<button id="out">-</button>
</template>
测试.css
.panel-title > span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-title div.tooltip {
white-space: initial;
}
测试.js
if (Meteor.isClient) {
var minZoom = 1;
var maxZoom = 4;
Session.setDefault('zoom', 4);
Template.example.helpers({
zoom: function () {
return Session.get('zoom');
}
});
Template.controls.events({
'click button': function(event) {
switch(event.currentTarget.id) {
case 'in':
if (Session.get('zoom') < maxZoom)
Session.set('zoom', Session.get('zoom') + 1);
break;
case 'out':
if (Session.get('zoom') > minZoom)
Session.set('zoom', Session.get('zoom') - 1);
break;
}
}
})
test = function() {
$('.panel-heading').each(function(index) {
var h3 = $(this).find('h3');
var span = $(this).find('span');
span.width('initial');
if (span.width() > h3.width()) {
span.width('100%');
}
});
$('[data-toggle="tooltip"]').tooltip();
}
Template.example.rendered = function() {
test();
}
}
希望很清楚我想要实现的目标是，当跨度超出 h3 的宽度时，跨度(悬停时切换到工具提示)设置为与 h3 相同的宽度 -或者如果 h3 更大，则跨度设置为其默认值(内联/初始宽度)。这样做的原因是，当初始化工具提示时，工具提示应显示在跨度文本上方(或下方)的中心。 渲染模板时对 test() 的调用按预期工作(您可以更改“缩放” session 的默认值，以在首次加载页面时更改面板的宽度 - 我一直在使用 1 和 4测试与. 但是，当 DOM 由于单击 + 或 - 按钮时发生的响应式(Reactive) session 变量“缩放”更改而更新时，我需要调用 test() 。发生这种情况时，面板类 col-md-# 会发生变化，其中 # 是缩放 session 变量的值。
总而言之，DOM 发生了变化，但这并不是对我直接进行的 JavaScript 调用的响应，也不是由于订阅的数据发生变化，所以我不相信我可以使用 Tracker.afterFlush 回调。 由于缩放助手必须在 DOM 更新之前返回，所以我看不到一种方法来调用由任何特定事件触发的“test()”，并且在按钮的单击中添加某些内容会发生得太早，有人有任何想法吗？
另外，根据我所读到的内容，突变观察者尚未得到广泛支持，因此这可能不是一个选择。
谢谢
最佳答案
如果我没猜错的话，您实际上是在更改 session 变量，并且希望在其更改时进行回调？如果这是正确的，那么将该变量包装在自动运行函数中将在每次变量更改时执行它。
此外，如果仍然存在竞争问题，您可以在调用 test() 之前使用具有较小延迟的 setTimeout。
Tracker.autorun(function () {
Session.get('zoom');
test();
});
关于javascript - 响应式模板数据改变 DOM 后 Meteor 调用 JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28069808/