2012-04-13 6 views
0

Как я могу получить доступ к элементу View, связанному с объектом Model?Доступ к модели доступа в Backbone.js

Например, у меня есть коллекция Products. Каждый товар имеет color. Я хотел бы «скрыть» (т. Е. Удалить представление представления) каждый продукт, color равен "red".

Единственный способ, который я знаю до сих пор, заключается в вызове (для примера) destroy() метода объекта модели (код ниже). Но я не хочу уничтожать объект модели. Можно ли удалить элемент 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(); 
} 

ответ

2

Модель не должна контролировать то, что делает вид.

Чтобы вызвать событие, вы должны использовать метод 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');

+2

Ударьте меня на пару минут. Я взломал быструю «грязную» (и надуманную) демонстрацию, если вы этого хотите: http://jsfiddle.net/ambiguous/Ex8KJ/1/ –

+0

Большое спасибо за ответ и демонстрационное приложение, очень полезно! – evfwcqcg