基础

Ember采用handlebars模板库作为应用的view层。Handlebars模板与普通的HTML非常相似。 但是相比普通的HTML而言handlebars提供了非常丰富的表达式。

Ember采用handlebars模板并且扩展了很多功能，让你使用handlebars就像使用HTML一样简单。

模板定义

前篇介绍了一个很重要的构建工具Ember CLI，从本篇开始后面所创建的文件都是使用这个构建工具来创建，先进入到项目路径下再执行Ember CLI命令。

创建一个模板命令ember g template application

由于这个模板在创建项目的时候就已经有了，所以会提示是否覆盖原来的文件，可以选择覆盖或不覆盖。

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

注意：代码中的第一句注释的内容表明了这个文件的位置已经文件名称，后面的代码片段也会采用这种方式标注。如果没有特别的说明第一句代码都是注释文件的路径及其名称。

上述就是一个模板，非常简单的模板，只有一个h1和p标签，当你保存这个文件的时候Ember CLI会自动帮你刷新页面，不需要你手动去刷新！此时你的浏览器页面应该会看到如下信息：

模板定义成功

handlbars表达式

每一个模板都会有一个与之关联的controller类、route类、model类（当然这些类是不是必须有的）。

这就是模板能显示表达式的值的原因，可以在controller类中设置模板中表达式显示的值， 就像java web开发中在servlet或者Action调用request.setAttribute()方法设置某个属性一样。

比如下面的模板代码：

<h2 id="title">Welcome to Ember</h2>

Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

下面我们创建一个controller。 这次我们用Ember CLI的命令创建： ember generate controller application， 这句命令表示会创建一个controller并且名称是application，然后我们会得到如下几个文件：

• app/controllers/application.js --controller本身
• tests/unit/controllers/application-test.js --controller对应的单元测试文件

打开你的文件目录，是不是可以在app/controllers下面看到了！ 现在为了演示表达式我们在controller里添加一些代码：

// app/controllers/application.js

import Ember from 'ember';

/**
 * Ember会根据命名规则自动找到templates/application.hbs这个模板，
 * @type {hash} 需要设置的hash对象
 */
export default Ember.Controller.extend({
    //  设置两个属性
    firstName: 'chen',
    lastName: 'ubuntuvim',
    email: 'chendequanroob@gmail.com'
});

然后修改显示的模板如下：

<h2 id="title">Welcome to Ember</h2>

Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

保存，然后页面会自动刷新（Ember CLI会自动检测文件是否改变，然后重新编译项目），在controller设置的值可以直接在模板上显示了。