Question

我使用复合视图来显示带有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(); });

它工作正常并得到更新。这可能现在有效，但它重新渲染我的整个表格，这可能是一种性能问题

Answer 1

我认为在这种情况下，文档会产生误导。 renderModel返回渲染视图的html。它没有触及$ el。

source：

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

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

如果您有兴趣以正确的顺序渲染事物，则不必担心显式调用渲染。相反，您可以推迟显示视图，直到模型提取完成。然后只需调用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

Backbone Marionette renderModel（）不适用于复合视图

1 个答案: