Question

我的页面上有一个小框，用户可以拖动文件并删除它们。当某些东西被拖入阴影时它会变成阴影，阴影在掉落时会变色。经过一段时间后，阴影就消失了。

这就是我认为视图中的事件代码应如下所示：

    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])在超时功能内部和外部都起作用。我不明白为什么会这样。
this.set('dropped', false)（在超时函数内）似乎没有从元素中删除“已删除”类，即使this.set('dropped', true)（在超时函数之外）确实有效。再说一次，我不明白这里发生了什么。
添加“drop”类似乎只发生一次，即使我等待计时器删除它然后将另一个项目拖到框中。添加“enter”类的dragEnter事件（以及删除它的dragLeave事件......上面的代码中没有一个为简洁起见）似乎在项目被删除之前和之后都正常工作。

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

Answer 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。

试着用适当的Ember.js方式做事......为什么这不起作用？

1 个答案: