gpt4 book ai didi

javascript - Meteor 0.8 Blaze 如何更新 Jquery 插件的渲染变化

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:33:56 26 4
gpt4 key购买 nike

我的问题是如何在 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;
}

最佳答案

最好的解决方案是编写自定义 block 助手。让我为你做:)

实现

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 助手的模式 here .但是,我不鼓励将此策略应用于您的特定用例。

关于javascript - Meteor 0.8 Blaze 如何更新 Jquery 插件的渲染变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22789821/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com