EmberJS - 使用元件包裝內容

您可以使用模板來包裝元件中的內容。假設我們有一個名為 {{my-component}} 的元件，可以透過在另一個模板中將屬性傳遞給它來包裝元件，如下所示 −

{{my-component title = title action = "funcName"}}

您可以與元件的包裝內容共享元件資料。有關更多資訊，請點選此 連結。

示例

下面給出的示例說明了如何在元件中包裝內容。建立一個名為 post-action 的元件，它將在 app/components/ 下進行定義。

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

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //This method sends the specified action
         this.sendAction();
      }
   }
});

現在開啟元件模板檔案 post-action.hbs 並新增以下程式碼 −

<input type = "button" value = "Click me" {{action "compFunc"}} /><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

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

<b>Click the button to check title property value</b>
{{post-action title = title action = "compFunc"}}
{{outlet}}

輸出

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

當您單擊按鈕時，compFunc() 函式將得到觸發，並且它將進一步顯示以下輸出 −