为集合创建骨干视图

问题描述：

如何将骨干视图绑定到集合而不是模型？我是否需要将模型中的集合包装起来？为集合创建骨干视图

例如

如果我有一个骨干模型客户，并且这些客户称为

Client = Backbone.Model.extend({ 
    defaults: { 
     Name: '' 
    } 
}); 

Clients = Backbone.Collection.extend({ 
    model: Client, 
    url: 'Clients' 
});

和视图

var ClientListView = Backbone.View.extend({ 
     template: _.template($("#clients-template").html()), 
     el: $('#clientlist'), 

     initialize: function() { 
      _.bindAll(this, 'render'); 

      this.collection = new Clients(); 
     }, 

     render: function(event){ 
      $(this.el).html(this.template({ this.collection.toJSON())); 

      return this; 
     } 
    });

我就不能在下划线模板访问每一个客户元素的集合。然而，如果我包装这样的集合

$(this.el).html(this.template({ clients: this.collection.toJSON() }));

然后我可以。这是正确的方式去做这件事吗？我期望这是一个常见的情况，但我找不到任何例子，我是否以错误的方式去做？

答

是的，你需要传递包装的集合。

阿迪奥斯马尼在他Backbone Fundamentals例子使用类似的方法 - 参见例如this view和对应template：

在视图：

$el.html(compiled_template({ results: collection.models }));

在模板：

<% _.each(results, function(item, i){ %> 
    ... 
<% }); %>

另一个另一种方法是创建一个视图，为集合中的每个模型创建单独的视图。下面是An Intro to Backbone.js: Part 3 – Binding a Collection to a View一个例子：

var DonutCollectionView = Backbone.View.extend({ 
    initialize : function() { 
    this._donutViews = []; 
    this.collection.each(function(donut) { 
     that._donutViews.push(new UpdatingDonutView({ 
     model : donut, 
     tagName : 'li' 
     })); 
    }); 
    }, 

    render : function() { 
    var that = this; 
    $(this.el).empty(); 

    _(this._donutViews).each(function(dv) { 
     $(that.el).append(dv.render().el); 
    }); 
    } 
});

在最后一个例子中，你需要'var this = this;'在initialize方法的顶部吗？ – dubilla 2013-09-19 17:13:00

@dubilla不，主干将代码下划线方法的上下文设置为'this'。 – EleventyOne 2013-10-14 02:13:19

为什么'this._donutViews = [];'有一个下划线字符？ – fortuneRice 2013-10-17 04:28:11

答

你可能想看看backbone collectionView。

为集合创建骨干视图

相关推荐