Backbone.js中的訪問模型視圖

Question

如何訪問與模型對象相關的View元素？

例如，我有一個Products的集合。每個產品都有color屬性。我想「隱藏」（即刪除查看錶示）的每個產品，其color等於"red"。

到目前爲止我所知道的唯一方法是通過調用Model對象的方法（代碼如下）destroy()。但我不想摧毀Model的對象。是否可以刪除View的元素而不更改其模型？

// App 
hide_red_products: function() { 
    Product.each(function(x) { 
    if (x.attributes.color == "red") { x.destroy() } 
    }) 
} 


// Products' view 
initialize: function() { 
    this.model.bind('destroy', this.remove_element, this); 
} 

remove_element: function() { 
    return $(this.el).remove(); 
} 

Answer 1

該模型不應控制視圖正在做什麼。

您應該使用trigger方法觸發事件。假設顏色從某種顏色變爲紅色，您應該使用change事件。如果您傾聽更改事件，則您甚至不需要使用hide_red_products方法。

// App 
hide_red_products: function() { 
    Product.each(function(x) { 

    //if (x.attributes.color == "red") { x.trigger() } 
    // you should never access a models attributes using the attributes key 
    if (x.get('color') === 'red') { x.trigger('change'); } // shouldn't actually need this. 
    }) 
} 


// Products' view 
initialize: function() { 
    //this.model.bind('destroy', this.remove_element, this); 
    this.model.bind('change', this.remove_element, this); 
} 

remove_element: function(model) { 
    if (model.get('color') === 'red') { 
    $(this.el).remove(); 
    } 
} 

就像我剛纔說的，如果視圖偵聽到更改事件，您不應該調用方法來刪除元素。如果你覺得有必要，你可以使用change或自定義事件x.trigger('changedToRed');