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 に答える