Question

我正在研究木偶，刚刚开始使用它。我不确定为什么我的ItemView没有呈现为＆lt; ul＆gt;。我想显示一个＆lt; li＆gt;对于＆lt; ul＆gt;之间的每个模型标签

这是我使用的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

您的代码有三个问题：

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/

集合视图不呈现项目视图

1 个答案: