集合视图不是呈现项目视图

Question

我正在调查Marionette并刚刚开始与它。我不知道为什么我的ItemView没有渲染成< ul>。我想为< ul>标签之间的每个型号显示< li>。

这里是小提琴，我创建：http://jsfiddle.net/36xu0jd4/

这里用我的JavaScript和提线木偶：

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）你错字的#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/