Javascript 如何使用LayoutView显示集合？

我正在学习主干网。木偶和我需要了解如何使用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：

布局模板和项目视图模板：

<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>

/*在此处显示我的第一个收藏*/
/*在此处显示我的第二个收藏*/
“alt=”“class=“img缩略图”/>

“alt=”“class=“img缩略图”/>

我真的很困惑

这里是您希望实现的目标

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>

如果您希望使用集合而不是模型，只需通过集合而不是模型，然后使用cycle来渲染它

---

希望这会有所帮助。

谢谢你，瓦汉。这很有帮助。现在我正在使用ItemView&CollectionView和LayoutView。LayoutView背后的动机是处理collectionViews区域之外的一些按钮事件。因此，我认为CompositeView可能更适合此用途。

CompositeView

绝对是您想要的，而不是所有这些自定义代码

CompositeView

s基本上是

LayoutView

s与

CollectionView

s合并而成。@HeinHaraldsonBerg您总是欢迎添加答案，而不需要所有这些自定义代码。

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