3

私の質問は、DOM で要素のグループが更新されたときに、1 つのイベントまたはレンダリングされたコールバックを取得する方法です。Blaze wiki https://github.com/avital/meteor-ui-new-rendered-callbackのリンクをたどると、これは私が望むものではありません。2 番目の推奨事項に従うと、要素と同じ数の呼び出しがレンダリングされます。また、親要素は、ページの読み込み時にレンダリングされたコールバックを 1 つだけ取得します。

私の場合、Footable Jquery プラグインを使用してテーブルをフォーマットしています。初期ロードは正常に機能しますが、コレクションの検索でフィルター変数を変更すると、DOM が更新され、Blaze がレンダリングを 1 回だけ呼び出すため、レンダリングが再度呼び出されることはありません。を別のテンプレートに入れたくありません。これは、テーブル全体に 1 つだけ必要な場合に、rendered への複数の呼び出し、したがって 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;
}
4

1 に答える 1

7

最善の解決策は、カスタム ブロック ヘルパーを作成することです。あなたのためにそれをしましょう:)

実装

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のヘルパーの実装方法のパターンに従う別の、より一般的なソリューションもあります。ただし、この戦略を特定のユースケースに適用することはお勧めしません。

于 2014-04-01T16:29:54.870 に答える