javascript - backbone filtering a collection -

javascript - backbone filtering a collection -

i trying filter collection based on attribute called status. 1 time filtered want re-render view reflect filtered results. far have come function in collection.

var projectcollection = backbone.collection.extend({ url: '/projects', model: app.project, status: function( status ) { homecoming this.filter(function(project){ homecoming project.get('status') == status; }); }, });

in view run following,

filterstatus: function(e) { e.preventdefault(); var elm = $(e.currenttarget), status = elm.data('statusid'); this.collection.reset( this.collection.status( status ) ); }

the render function below along it's functions called,

render: function() { this.$el.empty(); console.log("projectdashboardview render"); if(this.collection.length < 1) { var noprojects = new app.noprojectsdashboard; } else { this.addall(); } $(".month-column").height($(".project-holder").height() + 50); }, addall: function() { console.log("alladd"); this.collection.each(function(model){ this.addone(model) }, this); }, addone: function(model) { var view = new app.projecttimelineentry({ model: model }); this.$el.append( view.render() ); var number_of_days_in_calendar = 0; $('.month-column').each(function(){ number_of_days_in_calendar = number_of_days_in_calendar + parseint($(this).data('days')); }); var day_width = 1/(number_of_days_in_calendar) * 100; //is start after end of feb? var start_date = new date(model.get('start_date')); var march_date = new date("03/01/2014"); var current_month = start_date.getmonth() + 1; var march_month = march_date.getmonth() + 1; console.log(current_month, march_month); if(current_month <= march_month) { var start_date_offset = model.get('num_days_from_year_start') * day_width; var duration_of_project = model.get('run_number_days') * day_width; //view.$('.duration-bar').css("background-color", model.get('color')); view.$el.find('.duration-bar').css({ width : duration_of_project + "%", "margin-left" : start_date_offset + "%" }, 500); } else { var start_date_offset = (model.get('num_days_from_year_start') + 2) * day_width; var duration_of_project = model.get('run_number_days') * day_width; //view.$('.duration-bar').css("background-color", model.get('color')); view.$el.find('.duration-bar').css({ width : duration_of_project + "%", "margin-left" : start_date_offset + "%" }, 500); } // if(date.parse(start_date) < new date("01/03")) { // console.log("before march"); // } },

now filters collection, happens when seek , filter collection again, filters collection have reset too, how can filter collection, run views render() function 1 time filter complete, not maintain resetting collection?

you have add together attribute collection's model (app.project) store flag indicating if project has displayed or not.

var app.project = backbone.model.extend({ defaults: { ... status: '', display: true } };

then have add together code model view's render show/hide view's element depending on value of display attribute:

var projectview = backbone.view.extend({ ... render: function() { ... if (this.model.get('display')) this.$el.show(); else this.$el.hide(); ... homecoming this; }, ... };

and, have modify projectcollection's status method set display attribute on each model:

var projectcollection = backbone.collection.extend({ url: '/projects', model: app.project, status: function( status ) { this.each(function(project){ project.set('display', project.get('status') == status); }); }, ... });

javascript backbone.js backbone-collections