骨干木偶复合视图呈现模板 | 骨干木偶复合视图呈现模板

本文介绍了骨干木偶复合视图呈现模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

下面是一个小提琴我目前的code：

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

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

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

结果是包含小提琴的结果的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" ...>

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