骨架.js-集合和视图

如何解决骨架.js-集合和视图

| 我了解如何将集合或单个模型组合在一起。通常，我可以获取要显示的模型数据。但是我根本不清楚如何获取一个集合并显示该集合中的模型列表。我是否应该遍历集合并分别渲染每个模型？那应该是集合的渲染功能的一部分吗？还是集合仅具有其自己的视图，并且以某种方式将整个集合数据填充到视图中？一般来说，显示模型列表的正常方法是什么？

解决方法

根据我的经验，最好在集合视图中保留对每个模型视图的引用。我目前正在研究的项目中的以下代码片段应有助于您更好地理解这一点：

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(); 
    }
});

采用这种方法可以使您更有效地更新视图（重新渲染表中的一行而不是整个表）。 ,我认为有两种方法可以做到这一点。使用每个项目的视图，然后自己操作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>

请注意，我在模板中使用了_函数（有用！）。我还使用了\“ obj \”元素，该元素在模板函数中捕获。可能有点作弊；传递{gaggle：[...]}可能会更好，并且对实现的依赖性也较小。我认为，最终的答案是：“有两种方法可以做到，但没有哪一种很棒。” ,骨干网的想法是视图渲染是事件驱动的。视图附加到模型数据更改事件，以便在模型中的任何数据更改时，视图也会自动为您更新。您要对集合进行的操作是同时操纵模型的集合。我建议阅读带注释的示例。 ,我还发现这是Backbone框架中令人困惑的部分。示例Todos代码是此处的示例。它使用4个类： Todo（扩展Backbone.Model）。这代表一个要被放弃的物品。 TodoList（扩展Backbone.Collection）。其\“ model \”属性是Todo类。 TodoView（扩展Backbone.View）。其tagName为\“ li \”。它使用模板来渲染单个Todo。 AppView（扩展Backbone.View）。它的元素是\“＃todoapp \”。它没有使用\“ model \”属性，而是使用名为\“ Todos \”的全局TodoList（尚不清楚原因...）。它绑定到Todos上的重要更改事件，并且当发生更改时，它要么添加一个TodoView，要么遍历所有Todo实例，一次添加一个TodoView。它没有一个用于渲染的模板。它允许每个TodoView呈现自己，并且具有用于呈现统计信息区域的单独模板。对于初次审核，这并不是世界上最好的例子。特别是，它既不使用Router类来路由URL，也不将模型类映射到REST资源。但是，似乎“最佳实践”可能是为集合的每个成员保留一个视图，并直接操作由这些视图创建的DOM元素。

骨架.js-集合和视图

如何解决骨架.js-集合和视图

解决方法

相关推荐