3.1 Templates -- Handlerbars Basics(Handlerbars基础知识)

一、简介

Ember.js使用Handlerbars模板库来强化应用程序的用户界面。它就像普通的HTML，但也给你嵌入表达式去改变现实的内容。

Ember使用Handlerbars并且用许多新特性去扩展它。对于描述app的用户界面来说，它可以帮你考虑Handlerbars模板作为HTML就像DSL。而且，一旦你告诉Ember.js在屏幕上呈现一个给定的模板，你不需要为了确保它保持最新去编写任何额外的代码。

二、Defining Templates

你需要做的第一件事就是改变应用程序的模板（application template），它是当app加载的时候自动创建的。

下一步，你可以在app/templates文件夹中定义模板。记得默认的命名约定，一个路由route会渲染一个和它名字一样的模板。

app/templates/kittens.hbs

<h1>Kittens</h1>
<p>Kittens are the cutest!</p>

如果你想创建一个模板，在网站的许多区域是共享的，你应该研究components。

三、Handlerbars Expressions(表达式)

1. 每一个模板都有一个管理的controller。在这里模板可以找到它显示的属性。

你可以用一个大括号中的属性名来显示控制器controller的属性，像这样：

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

• 这将从controller中查找firstName和lastName属性，把它们插入到模板中描述的HTML中，然后把它们放入DOM。

2. 默认，最顶层的应用程序模板绑定到application controller。注意，默认情况下这个文件是不显示的，因为它是由Ember CLI幕后创建的。

要自定义controller的话，创建下面的文件：

app/controllers/application.js

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

上面的template和controller竟会组合在一其被渲染成下面的HTML：

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

3. 这些表达式有意的被绑定。那意味着如果templates使用的值发生改变，HTML会被自动更新。

4. 随着你应用程序的增大，将会有许多的templates，每一个都绑定到不同的controller。