javascript - 尝试以正确的 Ember.js 方式做事......为什么这行不通？

Question

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

我认为 View 中的事件代码应该如下所示:

    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();
      },
      [...]

但是，我遇到了一些问题:

1. this.set('text', [sometext]) 似乎没有做任何事情，无论是在超时函数内部还是外部。但是，$('#drop).text([sometext]) 在超时函数内部和外部都有效。我不明白这是为什么。
2. this.set('dropped', false)(在超时函数内)似乎没有从元素中删除“dropped”类，即使 this.set ('dropped', true) (在超时函数之外)确实有效。同样，我不明白这里发生了什么。
3. “已丢弃”类的添加似乎只发生了一次，即使我等待它被计时器删除，然后将另一个元素拖入框中也是如此。添加“enter”类的 dragEnter 事件(以及删除它的 dragLeave 事件……为简洁起见，上面的代码中均未包含任何事件)似乎在删除元素之前和之后都运行良好。

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

Answer 1

this

在 setTimeOut 函数中使用时是错误的，因为它绑定(bind)到不正确的对象。要解决这个问题，你可以说

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

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

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

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

Ember.run.later

由 ember 提供，基本上模仿 setTimeOut。