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

推荐答案

最好的解决方案是写一个自定义块助手。 Lemme为你做这件事：）

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.

还有另一种 - 更通用的 - 解决方案遵循降价帮助程序已实现此处。但是，我不鼓励将此策略应用于您的特定用例。

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