2014-10-29 231 views
-1

我想根據稱爲狀態的屬性篩選集合。一旦過濾,我想重新渲染視圖以反映過濾結果。到目前爲止,我已經在我的收藏中提出了這個功能。骨幹篩選集合

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過濾器是否完整,但不會重置收集?

+0

您還可以發佈視圖的呈現方法嗎? – ncksllvn 2014-10-29 15:26:26

+1

您必須爲集合的模型('app.Project')添加額外的屬性,該屬性將存儲指示是否需要顯示項目的狀態。 – hindmost 2014-10-29 15:27:39

+0

@ncksllvn請看我的編輯 – Udders 2014-10-29 15:29:32

回答

1

正如最後提到的,您應該添加一個visible字段到app.Project模型。 然後在ProjectView附加一個偵聽這個領域:

this.listenTo(this.model, "change:visible", this.onVisibleChange) 

和方法定義:

onVisibleChange: function(){ 
    $(this.el).css('display', (this.get('visible')) ? 'block': 'none') 
} 

在您的過濾方法,你跑過來集合,並相應地改變每個模型的visible領域,如果它應該或不應該被渲染。

var ProjectCollection = Backbone.Collection.extend({ 

    url: '/projects', 
    model: app.Project, 

    status: function(status) { 
     return this.each(function(project){ 
      project.set('visible', project.get('status') == status) 
     }); 
    }, 
}); 
0

你有額外的屬性添加到集合的模型(app.Project)將存儲標誌,指示,如果一個項目有顯示或不。

var app.Project = Backbone.Model.extend({ 
    defaults: { 
     ... 
     status: '', 
     display: true 
    } 
}; 

然後,你必須添加代碼到模型視圖的render將顯示/隱藏查看的元素取決於display屬性的值:

var ProjectView = Backbone.View.extend({ 
    ... 
    render: function() { 
     ... 
     if (this.model.get('display')) 
      this.$el.show(); 
     else 
      this.$el.hide(); 
     ... 
     return this; 
    }, 
    ... 
}; 

而且,最後你必須修改ProjectCollectionstatus方法在每個模型上設置display屬性:

var ProjectCollection = Backbone.Collection.extend({ 
    url: '/projects', 
    model: app.Project, 

    status: function(status) { 
     this.each(function(project){ 
      project.set('display', project.get('status') == status); 
     }); 
    }, 
    ... 
});