Ember活动

Question

我fadeTo在Ember部分模板的链接上有一个动画; 单击链接时激活此动画,它完成如下:

jQuery('#object').fadeTo(1000, 1);

所以需要1秒才能完成; 问题是如果我将鼠标移动到局部模板的区域之外,在动画结束之前,它就会停止; 例如,如果我单击链接,动画开始并且对象开始淡入,但是如果我在传递1秒之前将鼠标移出局部模板区域,则对象将不会完全可见,但其不透明度将保持不变少于1;

在实际视图中fadeTo调用执行代码的函数didInsertedElement...有人知道即使用户将鼠标移动到局部模板区域之外,我怎样才能拥有一旦开始完成的动画？

Answer 1

几件事:

1. 点击链接给我一个404,没有更多代码,很难获得上下文

2. 您是否正确使用Ember事件处理？您提到fadeTo代码在didInsertElement函数中,在处理click事件时听起来不正确. didInsertElement是在呈现(或重新呈现)元素之后调用的回调.

鉴于描述,听起来你有两个选择.这两种方法都不应该取决于光标位置.

选项1

如果您的模板足够简单,您可以绑定到视图中的单击事件,那么请选择它.这样,您不必指定任何选择器(例如,#object).

在您的模板中,您应该只有一个标准链接:

    <a href="#"> link text </a>

现在,在视图中处理事件

    App.FooView = Ember.View.extend({

      click: function(e) {
        $(e.target).fadeTo(1000, 1);
        return false;  // prevent page transition
      }

    });

选项2

直接绑定到链接,并在控制器中处理事件.

在模板中,向链接添加操作:

    <a href="#" id="object" {{action "fade"}}> link text </a>

现在,使用元素id 处理控制器中的事件:

    App.FooController = Ember.ObjectController.extend({

      actions: {
        fade: function() {
          $('#object').fadeTo(1000, 1);
        }
      }

   });

如果我离开这里,请为我们提供一些代码.谢谢.