將屬性傳遞給元件

元件不會直接訪問模板作用域中的屬性。因此，只在元件宣告時宣告該屬性（例如：{{component-name title=title}}）。外部模板作用域中的 title 屬性在元件的模板內可用。

語法

{{post-action title=title}}

在上面的程式碼中，post-action 元件有 title 屬性，並使用與屬性名（title）相同的名稱初始化。

示例

以下示例演示如何將屬性傳遞給元件。使用 post-action 名稱建立一個路由，然後開啟 router.js 檔案以定義 URL 對映 −

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('post-action');
});

//It specifies Router variable available to other parts of the app
export default Router;  

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

<p>Enter your data: {{input type = "text" value = title}}</p>
<p>The details of the object passed are : {{title}}</p>
{{yield}}

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

{{post-action title=title}}
{{outlet}}

在 app/routes/ 下建立 post-action.js 檔案，並使用以下程式碼 −

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function() {
      //assigning the default value for 'title' property
      return {
         title: ""
      };
   }
});

輸出

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