我的问题是在DOM中更新一组元素时如何获取1个事件或呈现的回调？如果我按照Blaze Wiki中的链接https://github.com/avital/meteor-ui-new-rendered-callback，这不是我想要的。如果我遵循第二条建议，我将获得与元素一样多的呈现调用。并且父元素在页面加载时将仅获得1个呈现的回调。
就我而言，我使用的是Footable Jquery插件来格式化表格。初始加载工作正常，但是如果我在Collection查找中更改过滤器变量，则DOM更新并且没有渲染被调用，因为Blaze仅调用一次渲染。我不想将其放到另一个模板中，因为这仅意味着对呈现的多个调用，从而在整个表只需要一个时就对Footable进行了多次调用。
任何帮助表示赞赏。
<template name="customerData">
<table class="table">
{{#each dataRows}}
<tr>
<td>{{first_name}}</td>
<td>{{last_name}}</td>
<td>{{email}}</td>
{{#each phones}}
<td>{{phone}}</td>
{{/each}}
</tr>
{{/each}}
</table>
</template>
Template.customerData.rendered = function(){
$(".table").footable();
}
Template.customerData.phones = function(){
var result = [];
_.each(this.phoneNumbers, function(element, index, list){
result.push({ phone: element});
});
return result;
}
最好的解决方案是编写自定义块帮助器。Lemme为您做:)
UI.registerHelper('footableBody', function () {
var dependency = new Deps.Dependency(),
dataSource = this,
handle, footable;
return UI.Component.extend({
render: function () {
var self = this;
return UI.Each(function () {
return dataSource;
}, UI.block(function () {
dependency.changed();
return self.__content;
}));
},
rendered: function () {
var $node = $(self.firstNode).closest('table');
handle = Deps.autorun(function () {
if (!footable) {
$node.footable();
footable = $node.data('footable');
} else {
footable.redraw();
}
dependency.depend();
});
},
destroyed: function () {
handle && handle.stop();
},
});
});
现在，您可以在模板中执行以下操作：
<table class="table">
<thead>
...
</thead>
<tbody>
{{#footableBody dataRows}}
<tr>
<td>{{first_name}}</td>
<td>{{last_name}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
</tr>
{{/footableBody}}
</tbody>
</table>
当然，您应该根据自己的需要自定义帮助程序的行为。
还有另一个更通用的解决方案，它遵循此处如何markdown实现帮助程序的模式。但是，我不鼓励将此策略应用于您的特定用例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句