javascript - Collection View 未渲染项目 View

Question

我正在研究 Marionette，并且刚刚开始研究它。我不确定为什么我的 ItemView 没有渲染成

。我想在
标记之间为每个模型显示一个
• 。

  这是我创建的 fiddle :http://jsfiddle.net/36xu0jd4/

  这是我使用的 JavaScript 和 Marionette:

  var data = [ 
      { "firstName": "Bill", "lastName": "Smith" }, 
      { "firstName": "Mary", "lastName": "Johnson" }, 
      { "firstName": "Sally", "lastName": "Jones" }, 
  ];
  
  var MyApp = new Backbone.Marionette.Application();
  
  MyApp.addRegions({
      mainRegion: '#js-page'
  });
  
  var AppLayoutView = Backbone.Marionette.LayoutView.extend({
      template: '#layout-template',
  
      regions: {
          listContainer: '.js-list-container',
          details: '.js-details'
      }
  });
  
  var appLayoutView = new AppLayoutView()
  MyApp.mainRegion.show(appLayoutView);
  
  var AppCollectionView = Backbone.Marionette.CollectionView.extend({
      childView: AppItemView,
  
      collection: data
  });
  
  var AppItemView = Backbone.Marionette.ItemView.extend({
      template: '#item-vew'
  });
  
  var appCollectionView = new AppCollectionView();
  
  appLayoutView.listContainer.show(appCollectionView);
  
  MyApp.start();
  

  这是我的 HTML:

  <div id="js-page"></div>
  
  <script type="text/template" id="layout-template">
      <div class="js-list-container">
          List goes here
      </div>
      <div class="js-details">
          Details goes here
      </div>
  </script>
  
  <script type="text/template" id="item-view">
      Item View!!!
  </script>
  

Answer 1

您的代码有 3 个错误:

1) data 需要是 Backbone.Collection 的实例，应该是:

var data = new Backbone.Collection([
    { "firstName": "Bill", "lastName": "Smith" }, 
    { "firstName": "Mary", "lastName": "Johnson" }, 
    { "firstName": "Sally", "lastName": "Jones" }
]);

2) AppItemView.template 中的 #item-vew 拼写错误，应该是:

var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-view'
});

3) AppItemView 需要在 AppCollectionView 之前定义，以便它可以用作 childView，应如下所示:

var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-view'
});

var AppCollectionView = Backbone.Marionette.CollectionView.extend({
    childView: AppItemView,

    collection: data
});

我的工作 fiddle http://jsfiddle.net/36xu0jd4/4/