【问题标题】:Backbone Marionette renderModel() not working for composite view骨干木偶 renderModel() 不适用于复合视图
【发布时间】:2013-04-18 17:40:22
【问题描述】:

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

collection items 进来很好,获取成功后视图会更新。但是,当 configModel.fetch() 完成时,复合视图模板中的包装位永远不会更新。

在文档中,它说您可以使用 .renderModel() 仅重新渲染视图中处理模型的部分。当我这样做时:

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

没有任何变化。但是当我使用 .render() 时:

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

它工作正常并得到更新。这暂时可行,但它正在重新渲染我的整个表格,这可能是一种性能问题

【问题讨论】:

  • “可能是性能问题”。如果它成为性能问题,为什么不担心呢?

标签: backbone.js marionette


【解决方案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);
},

如果您有兴趣以正确的顺序渲染事物,则不必担心显式调用 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!"); 
});

如果模型更新发生在您显示视图之后,并且您希望避免重新渲染整个组合,您可以在您的组合视图中使用 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

【讨论】:

  • 非常感谢!非常感谢您提到的所有选项。这是有道理的。我认为 renderModel 会做的事情似乎确实有点好。虽然名字有点误导。按照您的建议使用承诺应该可以解决问题。
猜你喜欢
  • 1970-01-01
  • 2014-04-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-09
  • 1970-01-01
相关资源
最近更新 更多