Meteor 0.8 Blaze how to update rendered changes for Jquery plugins

Question

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

Answer 1

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

Implementation

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.

Reflections

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.