如何使用LayoutView顯示集合？

Question

我在學習Backbone.Marionette，我需要了解如何使用LayoutView在模板中顯示模型。

在此基礎上例如：

App.js：

//VIEWS 
ArticleView = Backbone.Marionette.ItemView.extend({ 
    template: "#articleTemplate", 
    tagName: 'li', 
}); 

SelectedView = Backbone.Marionette.ItemView.extend({ 
    template: "#selectedTemplate", 
    tagName: 'li', 
}); 

var AppLayoutView = Backbone.Marionette.LayoutView.extend({ 
    template: "#layout-view-template", 

    regions: { 
    articles: "#articles", 
    selecteds: "#selecteds" 
    } 
}); 


myApp.addInitializer(function(options) { 
    var layoutView = new AppLayoutView(); 
    layoutView.render(); 

    layoutView.articles.show(new ArticleView(options.articles)); 
    layoutView.selecteds.show(new SelectedView(options.selecteds)); 
}); 

nsApp.start({ 
    articles: Articlescollection, 
    selecteds: SelectedsCollection 
}); 

的index.html：

佈局模板和模板ItemViews：

<script id="layout-view-template" type="text/template"> 
    <section> 
    <article id="articles"> 
     /* show My first collection here */ 
    </article> 
    <article id="selecteds"> 
     /* show My second collection here */ 
    </article> 
    </section> 
</script> 

<script type="text/template" id="articleTemplate"> 
    <img src="<%= thumbnail %>" alt="<%= title %>" class="img-thumbnail"/> 
    <%= title %> 
    <hr> 
</script> 

<script type="text/template" id="selectedTemplate"> 
    <img src="<%= thumbnail %>" alt="<%= title %>" class="img-thumbnail"/> 
    <%= title %> 
    <hr> 
</script> 

我真的很困惑這裏！

Answer 1

這裏fiddle你希望實現。

nsApp = new Backbone.Marionette.Application(); 
nsApp.addRegions({ content: '#main' }); 

Ar = Backbone.Model.extend({}); 
Se = Backbone.Model.extend({}); 

Articlescollection = new Ar({ thumbnail: "test", title: "Test title"}); 
SelectedsCollection = new Se({ thumbnail: "test", title: "Test title"}); 

//VIEWS 
ArticleView = Backbone.Marionette.ItemView.extend({ 
    template: "#articleTemplate", 
    tagName: 'li', 
}); 

SelectedView = Backbone.Marionette.ItemView.extend({ 
    template: "#selectedTemplate", 
    tagName: 'li', 
}); 

var AppLayoutView = Backbone.Marionette.LayoutView.extend({ 
    template: "#layout-view-template", 
    el: nsApp.content.el, 
    regions: { 
    articles: "#articles", 
    selecteds: "#selected" 
    } 
}); 

nsApp.addInitializer(function(options) { 
    var layoutView = new AppLayoutView(); 
    layoutView.render(); 
    layoutView.articles.show(new ArticleView({model: options.articles})); 
    layoutView.selecteds.show(new SelectedView({model: options.selecteds})); 
}); 

nsApp.start({ 
    articles: Articlescollection, 
    selecteds: SelectedsCollection 
}); 

和HTML：

<div id="main"> 
</div>  

<script id="layout-view-template" type="text/template"> 
    <section> 
    <article id="articles"> 
     /* show My first collection here */ 
    </article> 
    <article id="selected"> 
     /* show My second collection here */ 
    </article> 
    </section> 
</script> 

<script type="text/template" id="articleTemplate"> 
     <img src="<%= thumbnail %>" alt="<%= title %>" class="img-thumbnail"/> 

    <%= title %> 
    <hr> 
</script> 

<script type="text/template" id="selectedTemplate"> 
     <img src="<%= thumbnail %>" alt="<%= title %>" class="img-thumbnail"/> 

    <%= title %> 
    <hr> 
</script> 

而是集合模型使用。

有幾件事情需要注意：

1. 當通過集合或模型來Marionette.ItemView把它作爲對象{model: yourModelm collection: yourCollection}像示例所示。這樣，木偶將自動序列化並傳遞給模板。如果模型和集合傳遞模型都將被序列化。

2. 嘗試使用Marionette.CollectionView/CompositeView作爲集合，Marionette.ItemView用於模型。

從源代碼中遺失的部分是將LayoutView附加到應用的區域視圖的主要區域。

從小提琴：

nsApp = new Backbone.Marionette.Application(); 
nsApp.addRegions({ content: '#main' }); 

如果您想使用集合，而不是模型的只是讓它通過，而不是模型，並使用週期上呈現。

希望這會有所幫助。