我正在研究木偶,并从头开始。我不确定为什么我的ItemView没有呈现为

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


    • 这是我创建的小提琴: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>
      

      最佳答案

      您的代码有3处错误:

      1)data必须是Backbone.Collection的实例,应为:

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


      2)您在#item-vew中打错了AppItemView.template,应为:

      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
      });
      


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

09-10 05:31
查看更多