骨干木偶复合视图呈现模板 [英] Backbone Marionette Composite View Rendering Template

问题描述

我试图渲染木偶CompositeView中的列表。我不知道为什么呈现的列表只是有显示的字结果的项目。我期待中的第一项显示等级1 。

下面是一个小提琴我目前的code： http://jsfiddle.net/16L1hen4/

下面是我的JS，模板和数据：

JavaScript的：

  VAR应用=新Backbone.Marionette.Application（）;App.addRegions（{
    mainRegion：#main
}）;VAR的TreeModel = Backbone.Model.extend（{
}）;VAR TreeCollection = Backbone.Collection.extend（{
    型号：TreeModel中，    网址：'https://api.mongolab.com/api/1/databases/backbone-tree/collections/tree?apiKey=somekey}）;VAR的TreeView = Backbone.Marionette.CompositeView.extend（{    初始化：功能（）{
        的console.log（this.collection）;    }，    标签名：UL，    模板：_.template（$（'＃树模板）HTML（））
}）;VAR treeCollection =新TreeCollection（）;
treeCollection.fetch（）。完成（功能（）{
    VAR的TreeView =新的TreeView（{集合：treeCollection}）;
    App.mainRegion.show（TreeView控件）;
}）;
 

模板：

 ＆LT; D​​IV ID =主＆GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/模板ID =树样板＆GT;
    ＆LT;立GT;＆LT;％ - 名称％GT;＆LT; /李＆GT;
＆LT; / SCRIPT＆GT;
 

JSON数据：

  {
    _ID： {
        $ OID：54adab80e4b0aa674b256836
    }，
    名：1级，
    孩子：
        {
            名：孩子1  -  2级，
            孩子：
                {
                    名：乔恩 - 三级
                }，
                {
                    名：玛丽 - 三级
                }
            ]
        }，
        {
            名：孩子2  -  2级，
            孩子：
                {
                    名：比尔 - 三级
                }
            ]
        }
    ]
}
 

解决方案

您使用的是CompositeView中显示一个集合，但你需要定义一个 childView 渲染模型

  VAR LeafView = Backbone.Marionette.ItemView.extend（{
    // ...
}）;VAR的TreeView = Backbone.Marionette.CollectionView.extend（{
    childView：LeafView
}）
 

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

现在的结果显示在HTML，而不熟悉的下划线来源，我相信这是由该数据给予模板造成的事实空，并快速浏览一下下划线的来源表明，它是使用与

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

如果没有指定变量，在局部范围内发生的数据值。

含义，模板不能找到一个名的变量，反而会看它在全球范围内（窗口）

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

 ＆LT; IFRAME NAME =结果...＆GT;
 

I'm trying to render a list with a Marionette CompositeView. I am not sure why the rendered list just has an item displaying the word result. I was expecting the first item to display Level 1.

Here is a fiddle to my current code: http://jsfiddle.net/16L1hen4/

Here is my JS, template, and data:

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

Template:

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

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

JSON Data:

{
    "_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"
                }
            ]
        }
    ]
}

解决方案

You are using a CompositeView to display a Collection, but you need to define a childView to render the models

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

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

here is an updated fiddle. http://jsfiddle.net/6ok1rptq/

Now the "result" showing in the html, without being familiar with the underscore source, I believe this is caused by the fact that the data given to the template is null, and a quick look at the source of underscore shows that it is using with

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

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

Meaning that the template can't find a "name" variable, and will instead look it up in the global scope (window)

Result is just the name of the jsfiddle iframe containing the result of the fiddle

<iframe name="result" ...> 

这篇关于骨干木偶复合视图呈现模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！