Backbone JS filters form - backbone.js

Question

I have a UI with a form that has dropdowns andcheckboxes in order to filter the results returned from the server.
I wonder if I have to create a Model in order to keep the current settings available or just get the vals with jquery and pass them to the Collections fetch.
What would be better?

Answer 1

That dependes how much you want to invest in design, or you just can live with a more pragmatic approach.
If you run for the design solution we can say that there is not a Collection of results what we are playing with here. It is a FilterSearch model, and every time we are sending the filter params to the server what we are doing is creating an instance of FilterSearch. Let's say:
POST http://myapp.com/filter_searchs?field1=value1&field2=value2
The server will take this request and will return the array of results. Let's say:
{
"field1": "value1",
"field2": "value2",
"results": [ "result1", "result2" ]
}
The Backbone FilterSearch model will be updated with the info responded by the server:
var myFilterSearch = App.FilterSearch.new({ field1: "value1", field2: "value2" });
myFilterSearch.save({ wait:true });
And from there we can create our results Collection:
var myResults = App.Results.new( myFilterSearch.get( "results" ) );
(All code is simplified and not tested)

Answer 2

Another solution can be to store the filter fields into the Collection it self.
App.Results = Backbone.Collection.extend({
url: function() {
return "/results?field1=" + this.field1 + "&field2=" + this.field2 );
}
});
var myResults = App.Results.new({ field1: "value1", field2: "value2" });
myResults.fetch();
This approach is interesting because you can update the results just modifying the filter fields in the Collection and call to .fetch(), all the references to the Collection will remain.
(All code is simplified and not tested)

Answer 3

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 yourCollection = 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
for example you may have a check box which shows a specific category
var results = _.filter( this.models, function ( model ) {
if ( item.get('category') === 'y' )
return true ;
return false ;
});
You may keep filtering the result with all you dropdown and checkboxes
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 could reset the collection and skip the above return like
this.reset( results ) ;
View : Here your ui data requested you should call the filtered function after passing the ui for values using jquery