EmberJS - 動作

{{action}} 輔助類用於使 HTML 元素可點選，當用戶點選事件時，操作將轉發到應用程式。

語法

<button {{action 'action-name'}}>Click</button>

上述程式碼將按鈕點選新增到您的應用程式中，當用戶點選按鈕時，操作將轉發到指定的操作方法。

下表列出了操作的事件以及它們的描述：

序號	操作事件及描述
1	操作引數可以使用 {{action}} 輔助程式將引數傳遞給操作處理程式。
2	指定事件型別可以使用 on 選項在 {{action}} 輔助程式上指定替代事件。
3	允許修飾鍵您可以使用 allowedKeys 選項允許 {{action}} 輔助程式使用修飾鍵。
4	修改操作的第一個引數您可以透過為 {{action}} 輔助程式指定 value 選項來修改操作的第一個引數。

示例

以下示例演示瞭如何使用 {{action}} 輔助程式使 HTML 元素可點選，並將操作轉發到指定的操作方法。使用以下命令建立一個名為 post-action 的元件：

ember g component post-action

開啟在 app/component/ 下建立的 post-action.js 檔案，並新增以下程式碼：

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.toggleProperty('isShowingBody');
      }
   }
});

開啟在 app/templates/ 下建立的 post-action.hbs 檔案，並新增以下程式碼：

<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3>
{{#if isShowingBody}}
   <h2>Welcome To Tutorials Point</h2>
{{/if}}
{{yield}}

在 app/templates/ 下建立的 index.hbs 檔案中，複製以下程式碼：

{{post-action}}
{{outlet}}

輸出

執行 ember 伺服器；您將收到以下輸出：

當您點選切換按鈕時，它將從模板檔案中顯示以下文字：

emberjs_template.htm

列印頁面

序號	操作事件及描述
1	操作引數可以使用 {{action}} 輔助程式將引數傳遞給操作處理程式。
2	指定事件型別可以使用 on 選項在 {{action}} 輔助程式上指定替代事件。
3	允許修飾鍵您可以使用 allowedKeys 選項允許 {{action}} 輔助程式使用修飾鍵。
4	修改操作的第一個引數您可以透過為 {{action}} 輔助程式指定 value 選項來修改操作的第一個引數。