Javascript 此.model.on更改事件未触发

以下代码中未触发“更改”事件

var PageView = Backbone.View.extend({
    el: $("body"),
    initialize: function(){
        this.model.on("change:loading", this.loader, this);
    },
    loader: function(){
        if(this.model.get("loading")){
            this.$el.find('.loader').fadeIn(700);
        }
        else 
            this.$el.find('.loader').fadeOut(700);
    },
});

var PageModel = Backbone.Model.extend({
    defaults: {
        loading: null,
    },
    initialize: function(){
        this.set({loading:false});
    },
});

$(function(){
    var pageModel = new PageModel({});
    var pageView = new PageView({model: pageModel});
})

如果我在模型的

initialize

函数中添加此选项，则此选项有效：

 setTimeout(function() {
     this.set({'loading': 'false'});
 }, 0);

我可以这样说，但这是一个bug。

情况解释如下 以下是代码运行的顺序：

模型被创建

调用模型的

initialize

函数，将

load

属性设置为

false

然后将模型传递给视图

然后为

“更改：加载”

事件处理程序从未被调用，因为事件在注册后从未发生

快速修复 首先从模型中删除该集

var PageModel = Backbone.Model.extend({
    defaults: {
        loading: null
    }
});

然后，在创建视图后，设置

load

属性

var pageModel = new PageModel();
var pageView = new PageView({ model: pageModel });

pageModel.set('loading', false); // now the event should trigger

由于监听器现在是在更改模型的

加载

属性之前注册的，因此将调用事件处理程序

优化解 使用主干网的最佳实践：

• 避免内存泄漏

视图是一个原子组件，它应该只关心自身及其子视图。

在您的情况下，在视图上使用

el

属性并不重要，但它仍然超出了视图的职责范围。让调用代码处理传递用于此视图的元素

var PageView = Backbone.View.extend({
    initialize: function() {
        this.model = new PageModel();
        this.$loader = this.$('.loader');
        this.listenTo(this.model, "change:loading", this.loader);
    },
    loader: function() {
        this.$loader[this.model.get("loading")? 'fadeIn': 'fadeOut'](700);
    },
    render: function() {
        this.loader();
        return this;
    }
});

将默认值放在它们所属的位置

var PageModel = Backbone.Model.extend({
    defaults: {
        loading: false
    }
});

在这里，我们使用

el

选项选择

body

作为用于视图的元素，然后在准备就绪时调用

render

$(function() {
    var pageView = new PageView({ el: 'body' }).render();
});

监听器不会立即触发该事件，相反，我们使用

render

函数将视图置于其默认状态。然后，

加载

属性的任何后续更改都将触发回调

---

---

我已经在我的个人资料页面上列出了。您应该看一看，它从一开始到高级，甚至提供了一些解决常见问题的智能主干组件（如检测视图外的单击）。

嘿。昨天我睡着了，明白了是什么问题。但你给了我两件事让我思考：listento（试着弄清楚为什么更好）。您编写了关于el属性的内容，试图避免它，但仍然将其传递给视图。为什么？这只是我的观点和模型的一部分。我会经常使用el。我还应该为我将要使用的每个el.child初始化吗？还是将el与find（）方法一起使用？渲染是否会延迟触发？？若然，原因为何？因为序列？再次感谢您的完整回答。将检查您的页面。@aleXela

listenTo

是绑定主干中事件的更新且更好的方法，与以前的

.on

/

.bind

中的内存泄漏相关。关于

el

，我建议不要在视图中硬编码属性，并让调用代码处理它。直接使用

el

属性/选项时，将使用文档范围的jQuery选择器检索该属性。这可能会导致不必要的副作用和性能问题。