如何观察 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

您可以在值更改时触发事件

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


  this.trigger('headerClassChanged');

Answer 2

我建议为此属性实现一种 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 值时，您可以通过调用 setter 函数来实现：

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

如何观察 Backbone 中的变量变化

How to watch for variable changes in Backbone

javascript

backbone.js

backbone-views