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>

而不是使用集合模型。

有几点需要注意：

将集合或模型传递给Marionette.ItemView时，将其作为对象{model: yourModelm collection: yourCollection}传递，如示例所示。这样Marionette会自动序列化它并传递给模板。如果模型和集合传递模型都将被序列化。
尽可能使用Marionette.CollectionView / CompositeView作为集合，使用Marionette.ItemView作为模型。

源代码中缺少部分是将LayoutView附加到应用程序区域视图的主要区域。

来自小提琴：

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

如果您希望使用集合而不是模型，只需传递它而不是模型并使用循环来渲染它。

希望这会有所帮助。

如何使用LayoutView显示集合？

1 个答案: