Backbone Marionette 复合视图渲染模板

Question

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

这是我当前代码的 fiddle：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

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

逻辑结构是像您在问题中所做的那样向 Compositeview 传递一个集合，模型将在单独的项目视图中呈现。
在项目视图中，您可以调用：

this.model.get("property");

从视图中访问属性。

Answer 2

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

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

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

这是更新后的 fiddle。 http://jsfiddle.net/6ok1rptq/

现在 "result" 显示在 html 中，不熟悉下划线来源，我认为这是由于给模板的 data 为空造成的, 快速查看下划线的来源表明它正在使用 with

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

"If a variable is not specified, place data values in local scope."

意味着模板找不到 "name" 变量，而是会在全局范围内查找 (window)

Result 只是包含 fiddle

结果的 jsfiddle iframe 的名称

<iframe name="result" ...>

Answer 3

仔细阅读 marrionnete 文档 - 您需要定义一个 childView....

Backbone Marionette 复合视图渲染模板

Backbone Marionette Composite View Rendering Template

javascript

jquery

backbone.js

marionette