backbone.js - 集合和视图

Question

我理解如何将一个集合或一个单独的模型.我通常可以获得要显示的模型数据.但是我根本不清楚如何拍摄一个集合并获得该集合中的模型列表来显示.

我应该迭代集合并单独渲染每个模型吗？那应该是集合渲染功能的一部分吗？

或者该集合是否拥有自己的视图,并以某种方式将整个集合数据填充到视图中？

一般来说,显示模型列表的常规方法是什么？

Answer 1

根据我的经验,最好在集合视图中保留对每个模型视图的引用.

我正在处理的项目中的这个片段可以帮助您更好地理解这个想法:

var MyElementsViewClass = Backbone.View.extend({
    tagName: 'table',

    events: {
        // only whole collection events (like table sorting)
        // each child view has it's own events
    },
    initialize: function() {
        this._MyElementViews = {}; // view chache for further reuse
        _(this).bindAll('add');
        this.collection.bind('add', this.add);
    },
    render: function() {
        // some collection rendering related stuff
        // like appending <table> or <ul> elements

        return this;
    },
    add: function(m) {
        var MyElementView = new MyElementViewClass({
            model: m
        });

        // cache the view
        this._MyElementViews[m.get('id')] = MyElementView;

        // single model rendering
        // like appending <tr> or <li> elements
        MyElementView.render(); 
    }
});

采用这种方法可以更有效地更新视图(重新渲染表中的一行而不是整个表).

Answer 2

我认为有两种方法可以做到这一点.

• 每个项目使用一个视图,并自己操作DOM.这就是Todos的例子.这是一种很好的做事方式,因为单个模型项的事件处理更清晰.您还可以为每个项目执行一个模板.在缺点方面,您没有整个集合视图的单一模板.
• 使用整个集合的视图.这里的主要优点是您可以在模板中进行更多操作.缺点是你没有每个项目的模板,所以如果你有一个异构集合,你需要切换集合视图模板代码 - bletcherous.

对于第二个策略,我已经完成了类似这样的代码:

var Goose = Backbone.Model.extend({ });

var Gaggle = Backbone.Collection.extend({
   model: Goose;
};

var GaggleView = Backbone.View.extend({
    el: $('#gaggle'),
    template: _.template($('#gaggle-template').html()),
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
    }
};

var g = new Gaggle({id: 69);

g.fetch({success: function(g, response) {
    gv = new GaggleView({model: g});
    gv.render();
}});

模板代码看起来像这样:

  <script type="text/template" id="gaggle-template">
  <ul id="gaggle-list">
  <% _.each(gaggle, function(goose) { %>
     <li><%- goose.name %></li>
  <% }); %>
  </ul>
  </script>

请注意,我在模板中使用_ functions(有用!).我还使用了"obj"元素,它在模板函数中捕获.它可能有点作弊; 传入{gaggle:[...]}可能更好,而且更少依赖于实现.

我认为当谈到它时,答案是"有两种方法可以做到,而且没有一种方法可以做到这一点."