#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

当前不断的了解本章后续对模版的介绍时，请记住，助手可以使用在任何的常规的值可以用的地方。

并且，相当多的内建的助手（包括自定义助手）都可以这么嵌套的使用。

本节完