尝试以正确的 Ember.js 方式做事......为什么这不起作用？答案

【问题标题】：Trying to do things the proper Ember.js way... Why won't this work?尝试以正确的 Ember.js 方式做事......为什么这不起作用？
【发布时间】：2014-03-08 18:20:49
【问题描述】：

我的页面上有一个小框，用户可以在其中拖放文件。当有东西被拖进它时它会得到一个阴影，当它被放下时阴影会改变颜色。过了一会儿，影子就消失了。

这就是我认为我的事件在视图中的代码应该是这样的：

    App.AddView = Ember.View.extend({
      classNameBindings: ['enter:enter:leave', 'dropped:dropped:leave'],
      enter: false,
      dropped: false,
      text: 'Drag image files here.',
      drop: function(event) {
        this.set('text', 'Thanks!');
        this.set('enter', false);
        this.set('dropped', true);
        setTimeout(function() {
            this.set('text', 'Drag image files here.');
            this.set('dropped', false);
        }, 3500);
        event.preventDefault();
        event.stopPropagation();
      },
      [...]

但是，我有几个问题：

this.set('text', [sometext]) 似乎没有做任何事情，无论是在超时函数内部还是在它之外。但是，$('#drop).text([sometext]) 在 timeout 函数内部和外部都有效。我不明白这是为什么。
this.set('dropped', false)（在超时函数内）似乎没有从元素中删除“已删除”类，即使 this.set('dropped', true)（在超时函数外）确实有效。再说一次，我不明白这里发生了什么。
“dropped”类的添加似乎只发生一次，即使我等待计时器将其删除，然后将另一个项目拖入框中。添加“enter”类的dragEnter 事件（以及删除它的dragLeave 事件......为简洁起见，上面的代码中都没有包含）似乎在删除项目之前和之后都可以正常工作。

在带有计时器的视图上更改文本和添加/删除类的正确 Ember.js 方法是什么？

【问题讨论】：

如果您不完全熟悉变量作用域，我可以看到这会引起混淆。 Ember 将其方法的上下文设置为 this，但您使用的超时具有额外的函数范围层，因此您需要提供上下文（如下面的回答）。

标签： javascript jquery html css ember.js

【解决方案1】：

this

在 setTimeOut 函数中使用它是错误的，因为它绑定到了不正确的对象。要解决此问题，您可以说

setTimeout(function () { blah }.bind(this), interval)

或者按照每个人通常的方式分配

var self = this;
setTimeOut(function() { //use self here }, interval )

但是，在 ember 世界中使用 setTimeOut 是不受欢迎的。更好的解决方案是使用

Ember.run.later

ember 提供的基本模仿 setTimeOut。

【讨论】：