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值，可以通过调用setter函数来实现：

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

Answer 2

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

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


  this.trigger('headerClassChanged');

如何监视Backbone中的变量更改

2 个答案: