集合视图未呈现项目视图

Collection View is not rendering Item View

本文关键字：视图 项目 集合      更新时间：2023-09-26

我正在研究Marionette并刚刚从它开始。我不确定为什么我的ItemView没有呈现为<ul>。我想显示<li>对于<ul>标签。

这是我创作的一把小提琴：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>

您的代码有三个错误：

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

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

相关文章：