2013-04-25 76 views
2

我正在使用複合視圖來顯示具有Backbone Marionette的表格,但遇到一些問題時,在數據進入後重新渲染模板的包裝部分取我的模型。這裏是我的模板:Backbone Marionette renderModel()不適用於複合視圖

複合視圖的模板:

<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(); }); 

它工作正常,並得到更新。這可以現在工作,但它是重新渲染我的整個表,這可能是一種性能問題

+0

「可能是一種性能問題」。如果它成爲性能問題,爲什麼不擔心呢? – 2013-04-25 01:02:22

回答

6

我認爲文檔在這種情況下是誤導。 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!"); 
}); 

如果顯示視圖後發生的模型更新,並要避免重新呈現整個複合材料可以使用modelEvents在CompositeView中更新個別元素。

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

+0

非常感謝!真的很感謝你提到的所有選項。這很有道理。我認爲renderModel會做的事情確實看起來有點兒美好。雖然名稱有點誤導。 使用承諾,你建議應該做的伎倆。 – 2013-04-25 02:31:02

相關問題