#1 Handlerbars 基礎

英文原版：https://guides.emberjs.com/v2.13.0/templates/handlebars-basics/

Ember使用 Handlebars templating library來支持用戶接口。Handlerbars模版包括驚天的HTML和動態的Handlerbar表達式。

Handlerbar表達式中動態的內容通過數據綁定技術來渲染。這就是說，當你更新某個Ember對象中的屬性的時候，模版也會自動更新該屬性的值。

顯示屬性

模版是在一個上下文環境中被渲染的。並且這個上下文就是被模版讀取屬性的對象。在Ember中它經常是component–組件。不過，當渲染的是路由的模版的時候，這時上下文是路由對應的controller。

看下面的例子，application.hbs模版將會渲染firstName和lastName：

app/templates/application.hbs

Hello, <strong>{{firstName}} {{lastName}}</strong>!

firstName和lastName屬性是從當前的上下文中讀取的（application 的 controller），並且被渲染到<strong>元素中。

爲了給上例的模版提供firstName和lastName，這兩個屬性必須要被定義在application 的controller中。

app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

上面的模版的最終渲染效果如下：

Hello, <strong>Trek Glowacki</strong>!

記住，{{firstName}}和{{lastName}}是被綁定的。這就是說如果在controller中改變了相應屬性的值，那麼新的值會被自動更新到DOM中。

隨着你應用的日益龐雜，它將會需要更多的controller和component來幫助它渲染模版。

助手–Helpers

Ember另外給予你編寫自定義助手的機會。

比如說，你需要一段邏輯，做數的加法，並且你不需要通過定義計算屬性來實現它，那麼你可以這樣：

app/helpers/sum.js

import Ember from 'ember';

export function sum(params) {
  return params.reduce((a, b) => {
    return a + b;
  });
};

export default Ember.Helper.helper(sum);

上面的代碼將會以{{sum}} 助手的形式來調用sum( )函數：

<p>Total: {{sum 1 2 3}}</p>

這個助手最終將會輸出：6

Ember提供了許多內建的助手，你會後續的章節中瞭解它們。

助手的嵌套

助手可以嵌套在其他的助手的調用和組件的調用中。

這賦予你的應用非常靈活的能力。

當你需要使用嵌套的助手的時候，在內層的
助手不能使用{{ }}，正確的做法是使用( )：

{{sum (multiply 2 4) 2}}

在這個例子中，我們使用的乘法助手，它會在sum助手運行前運行，並將結果返回給sum助手。

sum助手將最終返回：10

當前不斷的瞭解本章後續對模版的介紹時，請記住，助手可以使用在任何的常規的值可以用的地方。

並且，相當多的內建的助手（包括自定義助手）都可以這麼嵌套的使用。

本節完