Question

我有一个Backbone Collection，我正试图在View中渲染。 JSON数据似乎是正确的，但是我无法从视图中访问这些值。

这是基本的集合：

define(['backbone', 'BaseModel'], function(Backbone, BaseModel) {

    var BaseCollection = Backbone.Collection.extend({

         model: BaseModel,
         url: "/collection/get?json=true",

         initialize: function() {}
    });

    return BaseCollection;

});

这是视图：

define(['backbone', 'BaseCollection'], function(Backbone, BaseCollection) {

    var BaseView = Backbone.View.extend({

        el: $('#baseContainer'),
        template: _.template($('#baseTemplate').html()),

        initialize: function() {
            _.bindAll(this);
            this.collection = new BaseCollection();
            this.collection.bind('all', this.render, this);
            this.collection.fetch();
        },
        render: function() {   

            //This returns 3 objects which is correct based on the JSON data being returned from the server
            console.log(this.collection.toJSON());

            var html = this.template(this.collection.toJSON());
            this.$el.html(html);
            return this;
        },

    });

    return BaseView;

});

我想我需要为集合中的每个模型迭代this.render。但是，我不确定，因为在完成所有迭代之前它不应该“渲染”。

任何建议都会很棒！谢谢！

Answer 1

您需要通过名称为模板提供对模型的访问权限。当你这样做时：

var html = this.template(this.collection.toJSON());

您最终将数组传递给template函数，该函数通常需要一个上下文对象（名称/值对）。试试这个：

var html = this.template({collection: this.collection});

然后在您的模板中，您可以使用collection.each迭代器函数或任何下划线实用程序方法迭代它们以进行迭代/过滤/ map / etc.我还建议在给模板访问集合时不使用toJSON，因为它会使您的数据变得笨拙并且难以使用。在发出HTTP请求时，最好留下toJSON。

Backbone.js在View中呈现集合

1 个答案: