EmberJS - 定義元件

您可以在 Ember.js 中輕鬆定義元件，每個元件名稱中都必須包含一個破折號（例如：my-component）。Ember.js 可以使用 *Ember.Component* 類定義元件子類。

可以使用以下命令建立元件 −

ember generate component component-name

示例

以下示例介紹如何在 Ember.js 中定義元件。使用名稱 *post-action* 建立一個元件，它將在 *app/components/* 下進行定義。

開啟 *post-action.js* 檔案並新增以下程式碼 −

import Ember from 'ember';

export default Ember.Component.extend ({
   toggleBody:['Welcome to Tutorialspoint!!!']
});

現在開啟元件模板檔案 *post-action.hbs*，其中包含以下程式碼 −

{{#each toggleBody as |body|}}
   Hello...{{body}}
{{/each}}
{{yield}}

開啟 *index.hbs* 檔案並新增以下程式碼 −

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

輸出

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