Ember 翻译——入门一：快速开始

快速开始

这指南将教你如何使用 Ember 从头开始建立一个简单的 app。

我们会包含如下步骤：

快速开始

一安装 Ember

二创建一个新的应用

三定义一个路由

四生产环境构建

一、安装 Ember

你可以使用 npm 的一条命令来安装 Ember， npm 是 Node.js 的包管理器。在你的终端里输入如下命令：

npm install -g ember-cli

没有 npm？ 点击这里学习安装 Node.js 和 npm。如果需要了解一个 Ember CLI 工程必要的完整依赖列表，请查询我们的 Ember 安装指南。

二、创建一个新的应用

一旦你通过 npm 安装了 Ember CLI，你将可以在你的终端里使用一条新的

ember

命令。你可以使用

ember new

命令来创建一个新的应用。

ember new ember-quickstart

这条命令将创建一个新的名叫

ember-quickstart

同时创建一个新的 Ember 应用在里面。开箱即用，你的应用将包括：

* 一个用于开发的服务器

* 模板编译

* JavaScript 和 CSS 压缩

* 基于 Babel 的 ES2015 特性

通过在集成包里提供你在建立一个生产就绪的 web 应用时所需要的一切，Ember 让开始一个新的工程变得轻而易举。

让我们确保所有东西的正确运行。

cd

进入到应用目录

ember-quickstart

并且通过输入如下命令搭建一个开发用的服务器：

cd ember-quickstart
ember server

几秒钟后，你将看到如下输出：

Livereload server on http://localhost:49152 Serving on http://localhost:4200/[/code] 
（任何时候要关闭服务器，请在你的终端里输入：Ctro-C）

在你挑选的浏览器中打开 
http://localhost:4200
。你将看见一个没有额外内容的 Ember 欢迎页面。恭喜！你已经创建并启动了你的第一个 Ember app。

让我们使用 
ember generate
 命令来创建一个新的模板：

ember generate template application


当用户加载了你的应用之后，
application
 模板将一直显示在屏幕上。在你的编辑器里，打开 
app/templates/application.hbs
 然后添加如下内容：

app/tempaltes/application.hbs

<h1>PeopleTracker</h1>

{{outlet}}


注意 Ember 会检测新的文件并在背后为你自动重新加载页面。你将看到欢迎页面被 “People Tracker” 替换。你也添加了一个 
{{outlet}}
 到这个页面里，它意味着任何嵌套的路由将被渲染到那个位置。

三、定义一个路由
让我们建立一个显示一系列指数的应用。为了完成它，第一步是建立一个路由。目前，你可以把路由认为是构成你应用的不同页面。

Ember 自带为常见任务自动生成示例代码的生成器。为了生成一个路由，在你的终端里输入如下内容：

ember generate route scientists


你讲看到如下输出：

installing route
create app/routes/scientists.js
create app/templates/scientists.hbs
updating router
add route scientists
installing route-test
create tests/unit/routes/scientists-test.js


那是 Ember 在告诉你它被成功创建了：

1. 一个当用户访问 
/scientists
 用来展示的模板

2. 一个被该模板用来获取模型的 
Route
 对象

3. 一个应用路由中的入口（位于 
app/router.js
 ）

4. 一个该路由的单元测试

打开新创建的模板 
app/templates/scientists.hbs
 然后添加如下 HTML：

app/templates/scientists.hbs

<h2>List of Scientists</h2>


在你的浏览器里，打开 
http://localhost:4200/scientists
。你将看到你添加到 
scientists.hbs
 模板里的 
<h2>
 ，就在我们的 
application.hbs
 模板中 
<h1>
 的下面。

既然我们让 
scientists.hbs
 模板得到了渲染，让我们再给它一些数据来渲染吧。我们通过为那个路由指定一个 模型 来完成它，并且我们可以通过编辑 
app/routes/scientists.js
 来指定一个模型。

我们将使用生成器为我们创建的如下代码来添加一个 
model()
 方法到 
Route
：

app/routes/scientists.js

importEmber from 'ember';

export default Ember.Route.extend({
model () {
return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
}
});


（这份代码使用 JavaScript 的最新特性，可能其中一些你也不熟悉。你可以通过 最新的 JavaScript 特性概述） 进行学习。

在一个路由的 
model()
 方法中，你可以返回任何你想要在模板中得到的数据。如果你需要异步获取数据， 
model()
 方法支持使用 Javascript Promises 的任何库。

现在让我们告诉 Ember 如何将那个字符串构成的数组转换成为 HTML。打开 
scientists
 模板，然后添加一些 Handlebars 代码来循环遍历数组，并且打印它：

app/templates/scientists.hbs

<h2> List of Scientists</h2>

<ul>
{{#each model as |scientist|}}
<li>{{scientist}}</li>
{{/each}}
</ul>


这里，我们使用 
each
 来循环遍历我们在 
model()
 钩子提供的数组中的每一个成员，然后讲台打印在一个 
<li>
 元素中。

创建一个 UI 组件

当你的应用日渐壮大，你意识到你将在多个页面（或者同一个页面多次使用它们）共享 UI 元素，Ember 让重构你的模板成为可重复使用组件变得非常简单。

让我们创建一个 
people-list
 组件，我们可以在多个地方使用它来展示人物列表。

和往常一样，Ember 有一个生成器让我们可以简单地完成它。通过输入如下命令创建一个新的组件：

ember generate conponent people-list


复制和粘贴 
scientists
 模板到 
people-list
 组件的模板，然后编辑它像如下代码：

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
{{#each people as |person|}}
<li>{{person}}</li>
{{/each}}
</ul>


请注意我们将的少量修改：硬编码的字符串（”List of Scientists”）-> 动态属性（{{title}}）。我们也重命名 
scientists
 为了一个更加通用的名字 
person
，来降低我们的组件在它被使用的地方的耦合度。

保存完这个模板，然后切换回 
scientists
 模板。用新的组件化版本替换掉原始代码。虽然组件看起来像 HTML 标签，但是它们使用像 （{{component}}） 的大括号替代了像 （） 的尖括号。我们告诉我们的组件：

1. 使用什么标题，通过 
title
 属性

2. 使用什么人物构成的数组，通过 
people
 属性。我们将提供这个路由的 
model
 作为人物列表。

app/templates/scientists.hbs

<h2>List of Scientists</h2>
<ul>
{{#each model as |scientist|}}
<li>{{scientist}}</li>
{{/each}}
</ul>
{{}people-list title="List of Scientists" people=model}


回到你的浏览器，你将看到 UI 是完全相同的。唯一的区别是我们已经组件化了我们的列表，使它变得更加可重用和可维护。

如果你创建一个用来展示不同人物列表的新的路由，你能在行动中看见它。作为给读者的一个练习，你或许可以创建一个展示著名程序员 
programmers
 的路由。通过重复使用 
people-list
 组件，你可以几乎不用编写代码来完成它。

四、生产环境构建
既然我们已经编写了我们的应用并且已证实它可以在开发环境中运行，是时候将它准备好给我们的用户了。为此，请运行如下命令：

ember build --env production


build
 命令打包了所有组成你应用的资源——JavaScript， 模板， CSS， 网络字体， 图片等。

在这种情况下，我们通过 
--env
 信号告诉 Ember 建立生产环境。这将创建一个优化的包，它已经准备好上传到你的 web 主机。一旦构建完成，你将在你应用的 
dist/directory
 目录发现所有级联和压缩过的资源。

Ember 社区重视协作和每个人都可以依赖的构建通用工具。如果你对如何快速而可靠地应用你的 app 到生产环境，请访问 Ember CLI Deploy 插件。

如果你应用你的应用到一个 Apache web 服务器，一开始请先为这个应用创建一个新的虚拟主机。为确保所有路由都被 index.html 正确处理，请添加如下指令到应用的虚拟主机配置 
FallbackResouce index.html
。

<  上一篇 Ember.js 指南引导页            下一篇 安装 Ember.js >

原文地址