Как наблюдать за переменными изменениями в Backbone

Question

У меня есть представление, которое имеет свойство headerClass, которое я определяю в верхней части представления и различными способами. Меняю значение на this.headerClass = 'new value'.

Но как я могу следить за изменениями этой переменной? Я попытался добавить this.headerClass.on("change", this.render, this);, но при этом получаю сообщение об ошибке.

Ниже мой код

MyView = Backbone.View.extend({ 
    el: $(".header"), 
    template: _.template($("#header-template").html()), 
    headerClass: 'normal', 

    initialize: function() { 
     this.render(); 

     //This doesn't seem to work 
     this.headerClass.on("change", this.render, this); 
    }, 

    render: function() { 
     this.$el.html(this.template({headerClass: this.headerClass})); 
     return this; 
    }, 

    changeClass: function() { 
     //When the value changes I want to re-render the view 
     this.headerClass: 'fluid'; 
    } 
}); 

Answer 1

Я хотел бы предложить реализацию своего рода setter функции для этого атрибута. Каждый раз, когда эта функция вызывается с новым значением, событие вызывает событие.

set_headerClass: function (value) { 
    this.headerClass = value; 
    this.trigger("changed:headerClass"); 
} 

Теперь вы можете добавить слушателя к представлению и наблюдать за изменениями:

initialize: function() { 
    ... 
    // Will re-render the view when the event is detected. 
    this.on("changed:headerClass", this.render, this); 
}, 

Если вы хотите изменить значение headerClass, вы могли бы сделать это путем вызова функции сеттер:

changeClass: function() { 
    this.set_headerClass('fluid'); 
} 

Answer 2

вы можете вызвать событие, когда значение изменяется

this.on('headerClassChanged', this.render); 


    this.trigger('headerClassChanged');