Backbone.js 初始化时未筛选主干视图

正如您在下面的代码中所看到的，我试图用从集合中获取和筛选的数据初始化主干视图。此筛选器不起作用并返回所有项目：

app.ShopView = Backbone.View.extend({
el:$('#content'),

initialize: function(options) { 
var that = this;
this.collection = new app.ShopProductsCollection();
this.collection.fetch().done(function(){
        var filterType = _.filter(that.collection.models,function(item){            
            return item.get('category') === 'accessories';
        })
        that.collection.reset(filterType);
    });
this.listenTo(this.collection, 'add', this.addOne);
},

render: function() {
this.$el.html(this.template());
this.addAll();
return this;
},

addAll: function() { 
this.collection.each(this.addOne, this);

},

addOne: function(model) {
view = new app.ShopItemView({model: model}); 
view.render();
this.$el.append(view.el);
model.on('remove', view.remove, view);
}

});

使用JQuery$。when（）包装器和重置事件的侦听器调用render方法，下面是我的新初始化方法：

initialize: function(options) { 
var that = this;
this.collection = new directory.ShopProductsCollection();
$.when(this.collection.fetch()).done(function(){
var filterType = _.filter(that.collection.models,function(item){            
        return item.get('category') === 'accessories';
    })
that.collection.reset(filterType);
     });
this.listenTo(this.collection, 'reset', this.render);
this.listenTo(this.collection, 'add', this.addOne);
},

---

我发现了两个问题，首先

el: '#content' instead el:$('#content'),

选择器将自动转换为jquery选择器

this.collection.fetch({success: ....}) or jquery promise for done or jquery $.when for done method, instead this.collection.fetch().done 

…提示。。。提线木偶可以帮你+咖啡脚本也很强大。。 下面是重写的示例

class app.ShopView extends Backbone.View

  el: "#content"

  initialize: (opt) ->
     @collection = new app.ShopProductsCollection
     @collection.fetch(success: _.bind(@onCollectionFetch, @))
     @collection.on 'add', @addOne


  onCollectionFetch: (collection) ->
     filter = _.filter collection.models, (model) ->
       model.get('category') is 'accessories'
     collection.reset filter 


  render: ->
    @$el.html @template()
    @addAll()
    @


  addAll: () ->  
    @collection.each @addOne, @


  addOne: (model) ->
    view = new app.ShopItemView model: model  
    view.render()
    @$el.append view.el
    model.on 'remove', view.remove, view

---

对于使用主干过滤集合，最好的方法是获取集合并返回一个子集过滤集合，这也将使您的代码更加可重用

要制作过滤器，您应该具有过滤功能

var app.ShopProductsCollection = Backbone.Collection.extend ({
  filtered : function () { 

我建议使用下划线过滤器，它将为valid返回true，为invalid返回false，其中true是您要查找的内容。使用this.models获取当前集合模型使用model.get（“”）获取要检查的元素

    var results = _.filter( this.models, function ( model ) {           
        if ( item.get('category') === 'accessories' ) 
        return true ; 
        return false ;
    });

然后使用下划线映射结果并将其转换为类似JSON的格式

    results = _.map( results, function( model ) { return model.toJSON()  } );

最后返回一个新的主干集合，只返回结果

    return new Backbone.Collection( results ) ;

（可选）如果不希望保留集合中的所有数据，而只保留筛选后的数据，则应重置集合并跳过上面的返回，如

    this.reset( results ) ;  

在视图中获取集合后，调用过滤函数并呈现过滤后的集合结果

        var filteredCollection = this.collection.filtered() ;
        this.collection = filteredcollection ; 
        this.render() ;