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：[...]}可能更好，而且更少依赖于实现。

我认为当谈到它时，答案是“有两种方法可以做到，而且没有一种方法可以做到这一点。”

Answer 3

骨干的想法是视图渲染是事件驱动的。

视图附加到模型数据更改事件，以便当模型中的任何数据更改时，视图会自动更新。

您对集合的意图是同时操作一组模型。

我建议阅读带注释的例子 。

Answer 4

我还发现这是Backbone框架的一个令人困惑的部分。

示例Todos代码就是一个例子。 它使用4个类：

• Todo （扩展Backbone.Model）。 这表示单个项目是todone。
• TodoList （扩展Backbone.Collection）。 它的“模型”属性是Todo类。
• TodoView （扩展Backbone.View）。 它的tagName是“li”。 它使用模板渲染单个Todo。
• AppView （扩展Backbone.View）。 它的元素是“#todoapp”。 它不使用“模型”属性，而是使用名为“Todos”的全局TodoList（不清楚为什么......）。 它与Todos上的重要变化事件有关，当有变化时，它要么添加一个TodoView，要么循环遍历所有Todo实例，一次添加一个TodoView。 它没有一个用于渲染的模板; 它让每个TodoView自我渲染，它有一个单独的模板来渲染统计区域。

这不是第一次审查的世界上最好的例子。 特别是，它不使用Router类来路由URL，也不将模型类映射到REST资源。

但似乎“最佳实践”可能是为集合的每个成员保留一个视图，并直接操作这些视图创建的DOM元素。