EmberJS快速入门(一)

最新推荐文章于 2024-12-01 22:19:11 发布

香格里拉烤鸡腿

最新推荐文章于 2024-12-01 22:19:11 发布

阅读量2.8k

点赞数 4

分类专栏： Ember快速入门文章标签： ember-js ember emberjs

Ember快速入门专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用EmberJS框架创建一个简单的应用，包括安装EmberJS、创建新应用、定义路由、编写UI组件及部署应用等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

英文原版：https://guides.emberjs.com/v2.13.0/getting-started/quick-start/

快速开始

本教程将指导你通过EmberJS创建一个简单的应用。

将包含以下几个历程：
① 安装EmberJS
② 创建一个新的应用程序
③ 定义一个路由
④ 编写一个UI组件
⑤ 部署你的应用

安装Ember

你可通过一个简单的npm命令来安装ember, npm– nodejs包的管理器。在你的命令行中输入如下命令：

npm install -g ember-cli

没有npm? 请点击这里学习如何安装NodeJS和npm。

创建一个新的应用程序

一旦你已经安装好了 Ember Cli，那你就可以通过ember new命令来创建你的应用了。如下

ember new ember-quickstart

此条命令会创建一个名叫ember-quickstart的文件夹，并且将新创建的应用放在该文件夹下。不出所料的，你的应用将包含：

一个开发服务器
模板编译器
通过Babel实现的ES2015的特性
javascript和css 压缩功能

ember已经将所有的准备工作帮你完成了，它使得创建应用的工作显的轻而易举。
让我们看看是不是所有的东西都运转正常了。直接 cd 到你的ember-quickstart目录下，然后通过以下命令来开启服务器：

cd ember-quickstart
ember server

稍微等一会，你将会看到如下信息：

Livereload server on http://localhost:49152
Serving on http://localhost:4200/

(在命令行按下 Ctrl + C ，可以在任何时候终止服务器的运行)

紧接着在浏览器中输入http://localhost:4200，那么你将会看到ember的欢迎页面。恭喜你哈！你刚刚创建并成功启动了你的第一个Ember应用。

接下来，让我们通过ember命令来创建一个新的模板：

ember generate template application

application模板将总是出现在用户的浏览器上。使用你的编辑工具打开app/templates/application.hbs文件，然后添加如下内容：

app/templates/application.hbs

<h1>PeopleTracker</h1>

{{outlet}}

请注意，ember会在后台检测该模板文件并自动的重载该模板对应的页面。
你应该会发现之前的欢迎页面不见了，取而代之的是”PeopleTracker”的大标题。
当然你也会对{{outlet}}感到好奇，它表明任何嵌套的路由所对应的内容都会被渲染到{{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向你展示了它都创建了哪些东西：

一个当用户访问 /scientists时，被展示的模板
一个可以给模板提供模型的路由
在app/router.js 中添加了一条路由记录
一个单元测试文件

打开这个新生成的模板文件：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模板。接下来，让我们给它一些数据吧。我们通过编辑app/routes/scientists.js来造一些数据.

我们在生成器创建好的app/routes/scientists.js中添加一个model()方法:

app/routes/scientists.js

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

(以上代码使用的最新的javascript语法，请参阅ECMAscript6语法)

你可以在model()方法中返回任何你想传递给模板的数据。如果你想通过异步的方式获取数据，那么仍然可使用model()方法，它支持任何使用Javascript Promise的库。

好了，现在让我们告诉Ember怎么把上面的数组嵌入HTML中。打开scientists模板文件，为它添加一些Handlerbars代码，让Handlerbars循环打印出这些数据：

app/templates/scientists.hbs

<h2>List of Scientists</h2>

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

在这里，我们借助于each助手来循环遍历出我们提供的数组中的数据。并且将数据都显示在 <li> 元素中。

创建UI组件

随着应用发展的越来越复杂，你注意到需要有一些可以复用的UI单元。Ember提供了可复用的组件，帮助你轻松实现这个目的。

现在让我们创建一个名叫 people-list的组件。实际上它是可以被复用的，在你任何需要它的地方引用它即可。

向之前一样，我们通过生成器来创建组件。命令如下：

ember generate component 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模板。并且修改scientists模板至如下方代码。组件的构成元素跟HTML的标签挺相似，但是注意了，组件中是用两个”{{ }}”来包裹它的内容– {{component}}。接下来我们要让组件做一些事情：

通过title属性告诉组件我们想要什么样的标题
通过people属性告诉组件我们要哪些人。

app/templates/scientists.hbs
{{people-list title="List of Scientists" people=model}}

好了，返回到浏览区。这时候你应该看到UI跟之前一样。不同之处在于我们是用可复用的组件来完成，并且复用性和可维护性更优。

点击事件

到目前为止，我们的应用已经可以展示数据了，但是仍然不能和用户交互。在web应用中，我们通常会监听用户事件，比如点击事件等。Ember使它变得更容易实现。
第一、在people-list组件中的

元素上添加action助手。

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
 <!--   <li>{{person}}</li>   -->
    <li {{action "showPerson" person}}> {{person}}</li>
  {{/each}}
</ul>

action助手可以让你在元素上绑定指定名称的事件监听函数。默认的，action助手会对点击事件进行监听，但是也可以指定它监听任何的DOM事件。好了，现在

元素会在被点击时触发事件，并调用在 pelple-list组件中的showPerson回调函数。就跟这样的形式类似”this.actions.showPerson(person)”。
为了处理这个函数调用，我们需要在people-list组件中添加这个函数。
在组件中定义actions对象，并在actions对象中添加showPerson函数，并且接受在模板传入的参数：
```
app/components/people-list.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions: {
    showPerson(person) {
      alert(person);
    }
  }
});
```
好了，让我们在浏览器上试试点击科学家的名字吧。

构建产品

现在我们已经编写完成了应用，并且在开发中验证它能良好的工作。是时候为我们的用户不熟应用了，运行以下的命令：
```
ember build --env production
```
build命令会打包所有构建你应用的资源– javascript，模板，CSS，web fonts , images等。

在这里，我们通过–ENV参数来通知Ember构建一个在生产环境下的应用。它便会创建一个可以上传到服务器上的优化过的包。一旦构建完成，你会发现在dist目录下有被编译和压缩过的你编写的所有东西。

如果你对部署有兴趣，并且想快速、可靠的完成部署。请关注Ember CLI Deploy 插件。
如果你要部署在 Apache服务器上，首先你需要创建一个新的虚拟主机。并且确保所有的路由要通过index.html来跳转，并且为你的虚拟主机添加FallbackResource index.html配置项.