Meteor 0.8 Blaze 如何更新 Jquery 插件的渲染更改 [英] Meteor 0.8 Blaze how to update rendered changes for Jquery plugins

问题描述

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

My question is how to get 1 event or rendered callback when a group of elements are updated in the DOM? If I follow the link in the Blaze wiki https://github.com/avital/meteor-ui-new-rendered-callback this is not what I want. If I follow the second recommendation, I will get as many rendered calls as I have elements. And the parent element will only get 1 rendered callback on page load.

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

In my case, I'm using the Footable Jquery plugin to format a table. The initial load works fine, but if I change a filter variable in the Collection find, the DOM updates and no rendered is called again since Blaze only calls rendered once. I do not want to put the into another template, because that just means multiple calls to rendered and thus multiple calls to Footable when it only needs one for the entire table.

感谢任何帮助.

<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;
}

推荐答案

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

The best solution would be to write a custom block helper. Lemme do it for you :)

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();
    },
  });
});

用法

现在，您可以在模板中执行以下操作:

Usage

Now, in your templates you can do something like:

<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>

当然，您应该根据自己的需要自定义助手的行为.

Of course you should customize the behavior of the helper to your own needs.

还有另一种更通用的解决方案，它遵循如何实现 markdown 助手的模式 这里.但是，我不鼓励将此策略应用于您的特定用例.

There is also another - more generic - solution that follows the pattern of how markdown helper is implemented here. However, I would not encourage to apply this strategy to your specific usecase.

这篇关于Meteor 0.8 Blaze 如何更新 Jquery 插件的渲染更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！