Question

我正在尝试使用Marionette CompositeView渲染列表。我不确定为什么渲染列表只有一个显示单词result的项目。我期待第一个项目显示Level 1。

以下是我当前代码的小提琴：http://jsfiddle.net/16L1hen4/

这是我的JS，模板和数据：

JavaScript的：

var App = new Backbone.Marionette.Application();

App.addRegions({
    mainRegion: '#main' 
});

var TreeModel = Backbone.Model.extend({    
});

var TreeCollection = Backbone.Collection.extend({
    model: TreeModel,

    url: 'https://api.mongolab.com/api/1/databases/backbone-tree/collections/tree?apiKey=somekey'

});

var TreeView = Backbone.Marionette.CompositeView.extend({

    initialize: function() { 
        console.log(this.collection); 

    },

    tagName: 'ul',

    template: _.template( $('#tree-template').html() )
});

var treeCollection = new TreeCollection();
treeCollection.fetch().done(function () {
    var treeView = new TreeView({collection: treeCollection});
    App.mainRegion.show(treeView);    
});

模板：

<div id="main"></div>

<script type="text/template" id="tree-template">
    <li><%- name %></li>
</script>

JSON数据：

{
    "_id": {
        "$oid": "54adab80e4b0aa674b256836"
    },
    "name": "Level 1",
    "children": [
        {
            "name": "Child 1 - Level 2",
            "children": [
                {
                    "name": "Jon - Level 3"
                },
                {
                    "name": "Mary - Level 3"
                }
            ]
        },
        {
            "name": "Child 2 - Level 2",
            "children": [
                {
                    "name": "Bill - Level 3"
                }
            ]
        }
    ]
}

Answer 1

更接近阅读marrionnete文档 - 您需要定义一个childView ....

Answer 2

我没有对此进行测试，但我认为错误在于您没有在CompositeView上定义Marionette Itemview。

逻辑结构是像在问题中一样将Compositeview传递给集合，模型将在单独的项目视图中呈现。
在项目视图中，您可以致电：

this.model.get("property");

从视图中访问属性。

Answer 3

您正在使用CompositeView来显示集合，但您需要定义childView来呈现模型

var LeafView = Backbone.Marionette.ItemView.extend({
    // ...
});

var TreeView = Backbone.Marionette.CollectionView.extend({
    childView: LeafView
})

这是一个更新的小提琴。 http://jsfiddle.net/6ok1rptq/

现在html中显示的“结果”，不熟悉下划线源，我相信这是由于给模板的data为空，并快速查看源代码下划线显示它正在使用with

http://underscorejs.org/docs/underscore.html#section-148

“如果未指定变量，请将数据值放在本地范围内。”

意味着模板找不到“名称”变量，而是在全局范围内查找（window）

结果只是包含小提琴结果的jsfiddle iframe的名称

<iframe name="result" ...>

骨干牵线木偶复合视图渲染模板

3 个答案: