主干.js视图中的渲染集合

Backbone.js render collection in View

本文关键字：集合 js 视图 主干      更新时间：2023-09-26

我有一个主干集合，我正在尝试在视图中呈现。 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。 但是，我不确定，因为它不应该"渲染"，直到它完成所有迭代。

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

您需要通过名称授予模板对模型的访问权限。执行此操作时：

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

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

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

然后在模板中，您可以使用 collection.each 迭代器函数或任何用于迭代/过滤/映射/等的下划线实用程序方法循环访问它们。我还建议在授予模板对集合的访问权限时不要使用 toJSON，因为它会使您的数据更笨且更难使用。 toJSON最好留到您发出 HTTP 请求时。

相关文章：