Emberjs-temp-act-mod-key

EmberJS-テンプレート修飾子キー

allowedKeysオプションを使用すると、_ \ {\ {action}} ヘルパーとともに修飾子キーを許可できます。 時々、 \ {\ {action}} _ヘルパーは、押された修飾キーを持つクリックイベントを破棄します。 したがって、_allowedKeys_オプションでは、無視しないキーを指定します。

構文

<button {{action 'action-name' allowedKeys = "alt"}}></button>

Copy

例

以下の例は、_ \ {\ {action}} _ヘルパーでの_allowedKeys_オプションの使用法を示しています。 新しいコンポーネントを作成し、次のコードで_post-action.js_という名前を付けます-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
     //toggling the text
      toggleBody: function () {
         this.toggleProperty('isShowing');
      }
   }
});

Copy

次のコードで_app/templates/_の下に作成された_post-action.hbs_ファイルを開きます-

<button {{action "toggleBody" on = 'click' allowedKeys = "alt"}}>{{title}}</button>
{{#if isShowing}}
<h2>Welcome to finddevguides</h2>
{{/if}}
{{outlet}}

Copy

次のコードで_app/templates/_の下に作成された_application.hbs_ファイルを開きます-

{{post-action title = "Click Me"}}
{{outlet}}

Copy

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsテンプレートアクション修飾子キー

今、ボタンをクリックすると、_ \ {\ {action}} _ヘルパーが_allowedKeys_オプションとともにトリガーされ、修飾キーを許可します-

Ember.jsテンプレートアクション修飾子キー