2

Backbone Marionette でテーブルを表示するために複合ビューを使用していますが、モデルでフェッチを行った後にデータが入ってくると、テンプレートのラッパー部分を再レンダリングするのに問題があります。ここに私のテンプレートがあります：

複合ビューのテンプレート:

<thead>
 <tr>
  {{#each report.columns}}
   <th>{{name}}</th>
  {{/each}}
 </tr>
</thead>
<tbody></tbody>

そして ItemView のテンプレート:

{{#each cols}} <td>{{value}}</td> {{/each}}

コントローラー関数では、モデルのインスタンスを作成し、ビューを作成して表示し、フェッチを行ってデータをモデルに取得しています。

var tView = new tableCompositeView({collection: rowsCollection, model: configModel});
layoutView.tablecontent.show(tView);
rowsCollection.fetch();
configModel.fetch();

コレクション アイテムは正常に取得され、フェッチが成功するとビューが更新されます。ただし、configModel.fetch() が終了しても、複合ビューのテンプレートのラッパー ビットは更新されません。

ドキュメントでは、 .renderModel() を使用して、モデルを扱うビューの部分のみを再レンダリングできると書かれています。私がこれを行うとき：

configModel.fetch().success(function(){ tView.renderModel(); });

何も変わりません。しかし、.render() を使用すると:

configModel.fetch().success(function(){ tView.render(); });

正常に動作し、更新されます。これは今のところ機能する可能性がありますが、テーブル全体を再レンダリングしているため、パフォーマンスの問題が発生する可能性があります

4

1 に答える 1

6

この場合、ドキュメントは誤解を招くと思います。renderModel は、レンダリングされたビューの html を返します。$el には触れません。

ソース:

renderModel: function(){
  var data = {};
  data = this.serializeData();
  data = this.mixinTemplateHelpers(data);

  var template = this.getTemplate();
  return Marionette.Renderer.render(template, data);
},

適切な順序でレンダリングすることに関心がある場合は、render を明示的に呼び出すことについて心配する必要はありません。代わりに、モデルのフェッチが完了するまでビューの表示を延期できます。次に、単に App.region.show(view); を呼び出します。あなたのためにすべてを整えます。

説明するフィドルは次のとおりです。http://jsfiddle.net/nEArw/12/

var metaPromise = Mod.metaModel.fetch({dataType: "jsonp"});
var tagsPromise = Mod.tagsCollection.fetch({dataType: "jsonp"});

metaPromise.done(function(data) {
    App.region.show(Mod.compositeView);
});

tagsPromise.done(function(data) {
    console.log("tags fetched!"); 
});

ビューを表示した後にモデルの更新が発生し、コンポジット全体の再レンダリングを避けたい場合は、compositeView で modelEvents を使用して個々の要素を更新できます。

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#viewmodelevents-and-viewcollectionevents

modelEvents: {
    "change:name": "nameChanged" 
 },

または、うさぎの穴をもう少し掘り下げたい場合は、モデル バインディング プラグインを使用できます。 https://github.com/theironcook/Backbone.ModelBinder

于 2013-04-25T01:53:15.547 に答える