集合視圖不是呈現項目視圖

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/