1

クロージャー アクションを使用する Ember では、次のように関数を渡すことができます。

1

    <div class="dropzone text-center" {{action (action openFilePicker)}}>   
<!-- this calls a function (no quotes!) -->
    </div>

次のように、アクションを呼び出す代わりに。

2

    <div class="dropzone text-center" {{action (action 'openFilePicker')}}> 
<!-- this calls an action (quotes!) -->
    </div>

(1) では、このコンポーネントをサポートするコードは次のようになります。

  openFilePicker: function () {
    let child = this.$('div:first-child');
    child.removeClass('is-dragging');
    child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
    filepicker.pick({
      container: 'modal',
      maxSize: (5 * 1024 * 1024),
      services: ['COMPUTER']
    });
  }

これは、JQuery を使用して DOM からいくつかの要素を削除し、外部からロードされた JS ファイルにある別の関数 (filepicker.pick) を呼び出します。

(2) では、同じコードがアクション内にあります。

actions: {
    openFilePicker: function () {
        let child = this.$('div:first-child');
        child.removeClass('is-dragging');
        child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
        filepicker.pick({
          container: 'modal',
          maxSize: (5 * 1024 * 1024),
          services: ['COMPUTER']
        });
    }
}

これを行うことの長所と短所は何ですか？component（1）はこれを行うための推奨される方法ではないことを理解していますが、確かに（1）は他のコード（コンポーネントのプロパティなど）へのアクセスを容易にします。いつものように、Emberドキュメントはこれに光を当てていないようです（とにかく見つけることができるわけではありません）。私が見つけることができるのは、任意の関数の呼び出しを思いとどまらせることを強調しているこのブログ投稿だけです (そうでなければ、そもそもなぜアクションがあるのでしょうか?)

したがって、この質問は意見につながる可能性がありますが、それは私が求めているものではありません. SCOPINGこれら2つのアプローチの違いは何ですか？たとえば、アクション内の関数内にいる場合、JS ランタイムの観点からのスコープの違いは何ですか? たとえば、「これ」はどちらの場合も同じですか？

4

1 に答える 1

1

本当に違いはありません。このひねりをチェックしてください。

唯一の大きな違いは、アクションのルックアップ時間です。バインドされた時間に存在する必要がありますが、これは (閉鎖アクション) には必須ではありませ{{action 'foo'}}ん。foo={{action 'foo'}}

アクション呼び出しは、ember によって現在のthisコンテキストにバインドされます。これは基本的に{{action}}、閉鎖アクションのヘルパーが行うことです。ヘルパーが評価されthisたときのコンテキストで、元の関数を呼び出す新しい関数を作成します。{{action}}

現在の関数スコープ外で別の関数を呼び出すthisと、常に異なります。this常に関数スコープにバインドされていることを理解することが重要です。

次のような関数を呼び出すと、myfunction()そのthis関数内にはnull. 次のような関数を呼び出すと、foo.myfunction()内部thisはmyfunctionになりますfoo。

this完全に理解していることを確認してください。一言で言えば、thisEmber でもまったく違いはありません。標準の Javascript です。

于 2016-09-13T09:42:54.900 に答える