0

我有一个只使用 jQuery 的简单动画：

jQuery(document).ready(function($) {

  $('.right-block').on('click', 'chevron', function() {
    if ($('.activity').hasClass('extended')) {
      $('.activity').removeClass('extended').addClass('normal');
      $('.extended-block').slideUp();
      $('footer').fadeOut();
    } else {
      $('.activity').addClass('extended').removeClass('normal');
      $('.extended-block').slideDown();
      $('footer').fadeIn();
    }      
  });

});

如果你喜欢，你可以在这里看到它：http: //cdpn.io/3bfea533af106c9bb601626be55eb3c1

当我尝试在 Ember 中做同样的事情时，事情变得有点有趣。动画开始，它反转，它重新启动，等等。它通常在很多来回之后完成，但状态转换不能保证它可能最终处于与您开始时相同的状态。

我的 Ember 组件如下所示：

App.ActivityWidgetComponent = Ember.Component.extend({

    actions: {
        toggleWidgetState: function() {
            var self = this;
            this.$('.right-block').on('click', 'chevron', function() {
                Ember.run.next(this, function() {
                    if (self.$('.activity').hasClass('extended')) {
                        self.$('.activity').removeClass('extended').addClass('normal');
                        self.$('.extended-block').slideUp();
                        self.$('footer').fadeOut();
                    } else {
                        self.$('.activity').addClass('extended').removeClass('normal');
                        self.$('.extended-block').slideDown();
                        self.$('footer').fadeIn();
                    }      
                }); 
            });
        }
    }

});

我偷偷地怀疑这与“运行循环”黑暗艺术有关。这就是为什么你看到我试图通过将 jQuery 添加到下一个运行循环来变得“棘手”的原因。这种变化似乎确实稍微改善了行为，但绝对没有解决它（我不确定这是否是朝着正确方向迈出的一步）。

任何帮助表示赞赏。

4

1 回答 1

0

您的问题是组件的操作只是添加了一个 jquery 事件侦听器，它将执行 jquery 动画，而不是触发它。你可以用这个替换你的组件：

App.ActivityWidgetComponent = Ember.Component.extend({

    actions: {
        toggleWidgetState: function() {                                      
            if (this.$('.activity').hasClass('extended')) {
                this.$('.activity').removeClass('extended').addClass('normal');
                this.$('.extended-block').slideUp();
                this.$('footer').fadeOut();
            } else {
                this.$('.activity').addClass('extended').removeClass('normal');
                this.$('.extended-block').slideDown();
                this.$('footer').fadeIn();
            }                                  
        }
    }

});

在您的模板中，使用action视图助手触发此操作：

  ...
  <div {{action "toggleWidgetState"}}  class="right-block">
    <chevron>&nbsp; &nbsp;</chevron>
  </div>
  ...

这是一个现场样本，这个工作http://jsfiddle.net/marciojunior/H9XYd/

于 2013-10-09T12:19:42.063 回答