在主干中呈现集合的最佳方法

Best method for rendering collection in Backbone

本文关键字：集合 最佳 方法      更新时间：2023-09-26

我正在使用Backbone，我有以下模型和集合

App.Models.Person = Backbone.Model.extend({
});
App.Collections.People = Backbone.Collection.extend({
    model: App.Models.Person,
    url: 'api/people',
});

然而，我正在努力的是渲染这个集合的最佳方式。 这是我到目前为止的做法，它有效，但似乎不是最优雅的解决方案

App.Views.PeopleView = Backbone.View.extend({
    el: $(".people"),
    initialize: function () {
        this.collection = new App.Collections.People();
        //This seems like a bad way to do it?
        var that = this;
        this.collection.fetch({success: function(){
            that.render();
        }});
    },
    render: function () {
        var that = this;
        _.each(this.collection.models, function (item) {
            that.renderPerson(item);
        }, this);
    },

我对 Backbone 相当陌生，但必须this分配给不同的变量，以便在成功函数中使用它似乎是一种糟糕的做事方式？ 如能提供有关最佳做法的任何帮助，将不胜感激。

Backbone 允许您注册可以做出反应的事件。 当集合与服务器同步时，它将始终触发sync事件。 您可以选择侦听该事件并调用任何给定的方法。 例如。。。

initialize: function () {
    this.collection = new App.Collections.People();
    this.listenTo(this.collection, "sync", this.render);
    // Fetch the initial state of the collection
    this.collection.fetch();
}

。将设置您的集合，以便在发生sync时始终调用this.render()。

关于骨干事件的文档简洁但相当不错。 请记住几点：

  • 用于注册事件侦听器的方法（即 listenTo 或 on ） 更改提供被调用函数上下文的方式。 例如，listenTo将自动使用当前上下文; on不会。 这部分文档很好地解释了它。
  • 如果需要删除视图，则需要断开事件侦听器的连接。 最简单的方法是首先使用listenTo来连接它们;然后在销毁视图时，您可以调用view.stopListening() .

对于渲染，有很多关于如何做到这一点的建议。 通常，具有呈现每个单独模型的视图是一种方式。 您还可以使用 Backbone.Collection#each 循环访问模型并控制迭代函数的范围。 例如：

render: function() {
    this.collection.each(function(model) {
        var view = new App.Collections.PersonView({ model: model });
        view.render();
        this.$el.append(view.$el);
    }, this);    
}

请注意，要.each的第二个参数指定迭代器的作用域。 （同样，请查看有关控制范围的文档。 如果您希望有一个框架来帮助渲染，请查看Marionette的CollectionView和ItemView。

如果您的视图应该只呈现集合，则可以将集合发送到 temnplate 并在模板中循环访问，否则您可以为此目的创建另一个子视图或将集合的各个模型发送到另一个子视图并附加到容器，希望对您有所帮助。

相关文章：