分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – Meteor 0.8 Blaze如何更新Jquery插件的渲染更改，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我的问题是如何在DOM中更新一组元素时获得1个事件或渲染回调？如果我按照Blaze wiki https://github.com/avital/meteor-ui-new-rendered-callback中的链接,这不是我想要的.如果我遵循第二个建议,我将获得尽可能多的渲染调用,因为我有元素.并且父元素只会在页面加载时获得1个渲染回调.

在我的例子中,我使用Footable Jquery插件来格式化表格.初始加载工作正常,但是如果我在Collection find中更改过滤器变量,则DOM会更新并且不会再次调用渲染,因为Blaze只调用一次渲染.我不想把它放到另一个模板中,因为这只意味着对渲染的多次调用,因此当它只需要一个整个表时,就会多次调用Footable.

任何帮助表示赞赏.

<template name="customerData">
  <table class="table">
    {{#each da@R_259_2301@ws}}
    <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 da@R_259_2301@ws}}
    <tr>
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{email}}</td>
      <td>{{phonE}}</td>
    </tr>
  {{/footableBody}}
  </tbody>
</table>