我试图在一个更大的项目中想办法解决这个问题,但把这个小例子放在一起,希望找到一个解决方案。
该示例是通过创建一个新的 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();
}
}
希望很清楚(ish)我试图实现的是,当跨度超过h3的宽度时,跨度(悬停时切换到工具提示)设置为与h3相同的宽度 - 或者如果h3更大,那么跨度设置为默认值(内联/初始宽度)。这样做的原因是,在初始化工具提示时,工具提示应显示在范围文本的上方(或下方)居中。渲染模板时对 test() 的调用按预期工作(您可以更改"缩放"会话的默认值以更改首次加载页面时面板的宽度 - 我一直在使用 1 和 4 进行测试。但是,当 DOM 由于单击 + 或 - 按钮时发生的反应式会话变量"缩放"更改而更新时,我需要调用 test()。发生这种情况时,面板类 col-md-# 会更改,其中 # 是缩放会话变量的值。
总而言之,DOM 发生了变化,但这不是为了响应我直接进行的 JavaScript 调用,也不是由于订阅的数据发生了变化,所以我不相信我可以使用 Tracker.afterFlush 回调。由于缩放助手必须在 DOM 更新之前返回,因此我看不到调用由任何特定事件触发的"test()"的方法,并且在单击按钮中添加一些内容会过早发生 有人有任何想法吗?
同样从我所读到的内容来看,突变观察者还没有得到广泛的支持,所以这可能不是一种选择。
谢谢
做对了,你实际上是在更改会话变量,并希望在它改变时有一个回调?如果这是正确的,那么每次变量更改时,将该变量包装在自动运行函数中都会执行它。
此外,如果仍然存在赛车问题,您可以在调用 test() 之前使用带有小延迟的 setTimeout。
Tracker.autorun(function () {
Session.get('zoom');
test();
});
这是我在流星论坛上发帖后无耻的回答。
在进行更改以导致反应性更改后,请将 javascript 放在Tracker.afterFlush
回调中。
http://docs.meteor.com/#/full/tracker_afterflush