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() 返回的数组中的每一项,并将它们显示在模版中.

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180325G0K5LZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券