骨干木偶复合视图渲染模板答案

【问题标题】：Backbone Marionette Composite View Rendering Template骨干木偶复合视图渲染模板
【发布时间】：2015-01-08 02:21:06
【问题描述】：

我正在尝试使用 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"
                }
            ]
        }
    ]
}

【问题讨论】：

Compositeview 需要一组 Backbone 模型来渲染，而不是单个模型。为了嵌套模型，您还可以在复合视图中使用集合视图。
@KimGysen 谢谢。我编辑了问题和代码以使用Backbone.Collection 而不是Backbone.Model。我仍然知道为什么第一项显示单词result。
这是一个小改动，和实际问题没有太大关系，但是你可以直接用template: "#tree-template"而不是下划线的方法来引用模板；如果它是对 DOM 对象的字符串引用，Marionette 将使用下划线自动为您查找模板。

标签： javascript jquery backbone.js marionette

【解决方案1】：

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

【讨论】：

我一定误解了文档。我认为一个模板就足够了，如果使用 childView，它只会被附加到模板中。
我很高兴你把它整理好了！我个人认为 marrionnete 是骨干最好的朋友:)

【解决方案2】：

您正在使用 CompositeView 来显示 Collection，但您需要定义 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

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

表示模板找不到“name”变量，而是在全局范围内查找（window）

Result 只是包含 fiddle 结果的 jsfiddle iframe 的名称

<iframe name="result" ...>

【讨论】：

感谢您的精彩解释。我没有意识到 CompositeView 需要 childView。

【解决方案3】：

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

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

this.model.get("property");

从视图中访问属性。

【讨论】：

感谢@KimGysen。我没有意识到 CompositeView 需要 ItemView。我认为定义一个模板就足够了。
@Mdd 不客气。对于 Compositeview，您可以定义一个模板，因为它允许您创建一个包装器 div 并在此包装器 div 中定义一个父元素，您希望在其中呈现项目视图。您不能使用集合视图来执行此操作。