EmberJS - Handlebar 基礎

Handlebars 模板庫能透過包含靜態 HTML 和動態內容來構建豐富的使用者介面，這些內容可以透過雙花括號指定 - {{}}。

語法

Ember.Controller.extend ({
   property1: value,
   property2: value,
   .....
   propertyn: valuen,
});

示例

以下示例演示如何從應用程式控制器顯示屬性。在 app/templates/ 下建立一個名為 application.hbs 的模板，程式碼如下 -

//displaying the values of firstSentence and lastSentence
Hello, <strong>{{firstSentence}} {{lastSentence}}</strong>!

現在建立同名（模板檔案）的控制器，以新增屬性。application.js 檔案將在 app/controller/ 下建立，程式碼如下 -

import Ember from 'ember';

export default Ember.Controller.extend ({
   //initializing values
   firstSentence: 'Welcome to',
   lastSentence: 'TutorialsPoint!'
});

輸出

執行 ember 伺服器，你將收到以下輸出 -

我們將在 編寫 Helper 章節詳細介紹 Helper 的概念。