具有主干的对象列表内的对象列表

时间:2014-08-22 14:41:55

标签: templates backbone.js

我有一个要在我的应用程序中显示的结构。任何人都可以知道如何显示以下结构吗?我尝试使用handlebarJS内部骨干,但它不适合我..

 1) Json object has list of objects A 
 2) A has prop A and list of objects B
 3) B has list of objects B1,B2,B3
 4) each of B1,B2,B3 has 2 properties.

因此传奇标签是道具A(名称)

   inside B1.string1  B1.string2

   inside B2.string1  B2.string2         

   inside B2.string1  B2.string2

代码:

PersonItemView = Backbone.View.extend({
    initialize: function () {
        this.template2 = _.template($('#temp').html());
    },
    render: function () {
        $(this.el).html( this.template2( this.model.toJSON()));

        return this;
    }
});

PeopleListView = Backbone.View.extend({

    render: function () {
        var people = [];

        this.collection.each(function (model) {

            var view = new PersonItemView({ model : model });

            people.push( view.render().el); 
        });

        this.$el.append(people);

        return this;
    }
});

在我的模板中,我能够将people.name打印为已设置的集合图例但在该字段集内部我正在循环人员。对象如下所示

<fieldset> 
    <legend>{{name}}</legend>

    {{#each people.objectList}}

    <label>{{string1}}</label>

    <label>{{string2}}</label>

    {{/each}}

</fieldset> 

在萤火虫中,我看到下面的错误并指向#character:

SyntaxError: illegal character ((__t=(#each Obj))==null?'':__t)+  

在集合中还有其他方法可以吗?

1 个答案:

答案 0 :(得分:0)

当我尝试将数组附加到您的视图中时,我看到的主要问题是您的PeopleListView的渲染调用:

this.collection.each(function (model) {

    var view = new PersonItemView({ model : model });

    people.push( view.render().el); 
});

this.$el.append(people);

您需要在循环中追加来自view.render调用的el:

this.collection.each(function (model) {

    var view = new PersonItemView({ model: model });

    this.$el.append(view.render().el);
});

或者您需要在追加它之前将该数组转换为直接标记:

this.collection.each(function (model) {

    var view = new PersonItemView({ model: model });

    people.push(view.render().el);
});

this.$el.append(people.join(''));