backbone view not filtered on initialize - backbone.js

Question

as you can see in the following code I'm trying to initialize a backbone view with data fetched and filtered from a collection. This filter doesn't works and return all the items:
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);
}
});
Got it working with the JQuery $.when() wrapper and a listener to the reset event to call the render method, here is my new initialize method:
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);
},

Answer 1

I see couple of problem, first of all,
el: '#content' instead el:$('#content'),
selector will be automaticaly converted to jquery selector
this.collection.fetch({success: ....}) or jquery promise for done or jquery $.when for done method, instead this.collection.fetch().done
...hint... marionette may help you + coffeescript is powerful too..
here is rewrited example....
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

Answer 2

For filtering collection using backbone the best approach is to fetch the collection and the return a subset filtered collection this will also make you code more reusable
To make the filter you should have a filtered function
var app.ShopProductsCollection = Backbone.Collection.extend ({
filtered : function () {
I suggest to use UnderScore filter which will return true for valid and false for invalid where true is what you are looking for. use this.models to get the current collection models use model.get( '' ) to get the element you want to check for
var results = _.filter( this.models, function ( model ) {
if ( item.get('category') === 'accessories' )
return true ;
return false ;
});
Then use underscore map your results and transform it to JSON like
results = _.map( results, function( model ) { return model.toJSON() } );
Finally returning a new backbone collection with only results
return new Backbone.Collection( results ) ;
Optionally if you don't want to keep all the data in the collection but just the filtered one you should reset the collection and skip the above return like
this.reset( results ) ;
In your View after fetching the collection you call the filter function and render the filtered collection result
var filteredCollection = this.collection.filtered() ;
this.collection = filteredcollection ;
this.render() ;