Ember.js-快速导读上

Quick Start

本篇教程将会教你如何从头开始构建一个简单的Ember 应用程序.

构建过程包括下列步骤：

安装Ember

创建应用

定义路由

编写UI组件

部署应用到生产环境

Install Ember

你可以通过一条简单的npm命令安装Ebmer.在你的命令行中输入：

npm install -g ember-cli@3.0

Create a New Application

一旦Ember CLI安装完成，接下来就可以创建新应用了。使用命令：

ember new ember-quickstart

这条命令会创建一个新的目录:ember-quickstart, 并且会把Ember 应用安装在内。应用会包括：

一台开发服务器

模版编译器

javascript和css压缩器

ES2015 功能特性

Ember提供了完备的功能，使得项目构建的更容易.

接下来我们确认下是否需要的东西都齐活了.cd进应用根目录ember-quickstart并且开启服务器：

cd ember-quickstart

ember serve

待服务器启动，你会看见如下的输入：

Livereload server on http://localhost:7020

Serving on http://localhost:4200/

(在任何时候都可以通过Ctrl + C停止服务器)

打开浏览器，访问http://localhost:4200. 你应该会看到Ember的欢迎页面，如果是这样，那么恭喜你!

接下来，开始编辑application模版. 这个模版总会在载入应用后出现在窗口.在你的编辑器中打开app/templates/application.hbs，然后写点东西：

PeopleTracker

{}

Ember会发现文件变化并且自动在后台重载页面. 你会发现之前的欢迎页面被替换成"PeopleTracker". 当然，上面提到的{}并不是没有用，它是表明下层路由将会被渲染到它所在的位置.

Define a Route

接下来我们做一个页面用来显示一些科学家的名字。第一步，创建一个路由。至此，你可以认为路由构建了应用的不用页面。

Ember 提供了generators帮助开发者快速创建功能单元，生成route的命令：

ember generate route scientists

控制台的输出:

installing route

create app/routes/scientists.js

create app/templates/scientists.hbs

updating routeer

add route scentists

installing route-test

create tests/unit/routes/scientists-test.js

Ember 告诉了你都创建了什么：

当用户访问/scientists时展示的模版文件。

一个Route对象，提供model给上面的模版使用。

在应用的路由列表里添加了此路由的访问入口(app/router.js)

一个单元测试文件

在新创建的模版文件里(app/templates/scientist.hbs)添加一些HTML:

List of Scientists

在浏览器中访问http://localhost:4200/scientists. 你应该会看到页面上有两个header元素，其中一个是application.hbs中的。

接下来，我们给模版提供一些数据。

在scientists 的 route 文件中定义一个model函数.

import Route from '@ember/routing/route';

export default Route.extend({

model () {

return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];

}

});

在route的model ( )里，你可以返回任何模版可用的数据(意味着可以从model( )中返回从后台获取的数据).

再接下来，渲染出我们要的数据. 编辑scientists模版，通过一个循环罗列出所有的名字：

List of Scientists

{{#each model as |scientist|}}

{}

{{/each}}

在这里，我们通过each助手遍历出model() 返回的数组中的每一项，并将它们显示在模版中.