如何使用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' }); 

如果您想使用集合，而不是模型的只是让它通过，而不是模型，并使用周期上呈现。

希望这会有所帮助。