1

fadeToEmber 部分テンプレートへのリンクにアニメーションがあります。このアニメーションは、リンクをマウスでクリックするとアクティブになり、次のように行われます。

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

そのため、完了するまでに 1 秒かかります。問題は、アニメーションが終了する前に部分テンプレートの領域の外にマウスを移動すると、アニメーションが停止することです。たとえば、リンクをクリックすると、アニメーションが開始され、オブジェクトがフェードインし始めますが、1 秒が経過する前にマウスを部分的なテンプレート領域の外に移動すると、オブジェクトは完全には表示されませんが、不透明度は残ります。 1 未満。

コードを実行する関数は、実際のビューfadeTo内didInsertedElementで呼び出されます...ユーザーが部分的なテンプレート領域の外にマウスを移動しても、一度開始されたアニメーションを完了する方法を誰かが知っていますか?

4

1 に答える 1

5

いくつかのこと：

  1. リンクをクリックすると 404 が表示され、さらにコードがないとコンテキストを取得するのが難しくなります

  2. Ember イベント処理を適切に使用していますか? fadeToコードが関数内にあるとおっしゃいdidInsertElementましたが、クリック イベントを処理するときに正しく聞こえません。 didInsertElement要素がレンダリング (または再レンダリング) された後に呼び出されるコールバックです。

説明を考えると、2 つのオプションがあるように思えます。どちらのアプローチも、カーソル位置に依存するべきではありません。

オプション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);
        }
      }

   });

私がここでベースから外れている場合は、コードを提供してください。ありがとう。

于 2014-01-21T03:13:26.310 に答える