我想根據稱爲狀態的屬性篩選集合。一旦過濾,我想重新渲染視圖以反映過濾結果。到目前爲止,我已經在我的收藏中提出了這個功能。骨幹篩選集合
var ProjectCollection = Backbone.Collection.extend({
url: '/projects',
model: app.Project,
status: function(status) {
return this.filter(function(project){
return project.get('status') == status;
});
},
});
在我看來我的運行下面,
filterStatus: function(e) {
e.preventDefault();
var elm = $(e.currentTarget),
status = elm.data('statusid');
this.collection.reset(this.collection.status(status));
}
渲染以下功能與它也被調用函數一起,
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 the start after the 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");
// }
},
現在這個過濾收集,然而,當我嘗試再次過濾集合時,會發生什麼情況,它會過濾我剛剛重置的集合,我如何過濾集合,運行視圖render()
函數o過濾器是否完整,但不會重置收集?
您還可以發佈視圖的呈現方法嗎? – ncksllvn 2014-10-29 15:26:26
您必須爲集合的模型('app.Project')添加額外的屬性,該屬性將存儲指示是否需要顯示項目的狀態。 – hindmost 2014-10-29 15:27:39
@ncksllvn請看我的編輯 – Udders 2014-10-29 15:29:32