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

最新推荐文章于 2024-08-10 07:11:29 发布

Dale_H

最新推荐文章于 2024-08-10 07:11:29 发布

阅读量1.5k

点赞数

分类专栏：前端 Ember 文章标签： ember ember入门 ember教程 ember-翻译 quickstart

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Ember

20 篇文章 0 订阅

订阅专栏

快速开始

这指南将教你如何使用 Ember 从头开始建立一个简单的 app。
我们会包含如下步骤：

四生产环境构建

一、安装 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/

（任何时候要关闭服务器，请在你的终端里输入：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}