我使用一个复合视图来显示一个带有主干木偶的表,但是在我对模型进行获取之后,当数据进入时,让模板的包装部分重新加载会遇到一些问题。以下是我的模板:
复合视图的模板:
<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();
收集项很好,当获取成功时,视图会更新。不过,当confiModel.fetch()完成时,复合视图模板中的包装器位永远不会更新。
在文档中,它说您可以使用. renderModel()来重新呈现视图中处理模型的部分。当我这样做的时候:
configModel.fetch().success(function(){ tView.renderModel(); });
什么都没变。但是,当我使用。
configModel.fetch().success(function(){ tView.render(); });
它运行良好,并得到更新。这可能会暂时奏效,但它会让我的整个桌子重新招标,这可能是一个性能问题
我认为这些文件在这种情况下具有误导性。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。相反,您可以推迟显示视图,直到模型获取完成。然后简单地调用应用程序。区域显示(视图);会为你安排好一切的。
这里有一把小提琴来说明: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!");
});
如果在显示视图后发生模型更新,并且希望避免重新渲染整个复合,则可以在复合视图中使用模型事件来更新单个元素。
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