Skip to content

Latest commit

 

History

History
251 lines (192 loc) · 5.9 KB

ember初探--Core Concept.md

File metadata and controls

251 lines (192 loc) · 5.9 KB
Raw

Table of Contents generated with DocToc

Ember初探--Core Concept

自称是：A framework for creating ambitious web applications，为效率而生， 默认使用Handlebars模板引擎

依赖：

  • node
  • npm
  • bower -- 依赖管理工具
  • wtachman(optional)
  • phantomjs(optional)
# install
$ npm install -g ember-cli

core concept

一张图看明白ember架构：

ember core concept

initial app

# 新建应用
$ ember new app-name

会自动帮你加入bower/npm module依赖，建立bower.json和package.json，init git并配置.gitignore，增加jshint、watchman甚至是.travis.yml

生成文件结构：

|--app (models, components, routes, templates, styles...)
|--bower_components (ember-cli dependency)
|--config (environment.js)
|--dist (build output)
|--node_modules (node dependency)
|--public (assets such as images/fonts)
|--tests (Automated tests)
|--tmp (Ember CLI temporary files)
|--vendor (third-party front-end dependencies)

bower.json
ember-cli-build.js
package.json
README.md
testem.js

router & route handler

app/router.js文件根据不同路由，选择app/routes/里的不同文件（route handler）。每个route handler文件的基本构成：

// app/routes/XXX.js
import Ember from 'ember';

export default Ember.Route.extend({
});

例如，我们设置的路由为/example，那么在访问这个路径的时候，ember会在app/router.js查找examlpe是否注册：

Router.map(function() {
  this.route('example');
});

接着，去app/routes/文件夹下寻找对应的route handler。我们可以在route handler文件里通过modal查询并返回数据：

// app/routes/example.js
import Ember from 'ember';

// hard code
export default Ember.Route.extend({
  model() {
    return ['this is example1', 'this is example2', 'this is example3'];
  }
});

model & template

如果要使用model进行数据库查询，则需要创建model文件并定义数据结构：

$ ember g model example
# create app/models/example.js
# create tests/unit/models/example-test.js
// app/models/example.js
import DS from 'ember-data';

export default DS.Model.extend({
  // define your data
  // for example,
  examples: DS.attr()
});
// app/routes/example.js
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    // 它会发送一个GET请求到/examples
    // 具体方式之后再说
    return this.get('store').findAll('example');
  }
});

之后，route在app/templates/里寻找并渲染对应的模板：

<!-- templates/example.hbs -->
<ul>
    {{#each model as |example|}}
        <li>{{example}}</li>
    {{/each}}
</ul>

如果我们有通用的贯穿个页面的base_layout样式，则可以新建一个application模板：

$ ember g template application
# create app/templates/application.hbs

在application.hbs中：

{{outlet}}

{{outlet}}会把不同路由渲染的模板加载进application.hbs模板里。

component

有时，对于一些可复用的组件，我们可以创建component

$ ember g component example-component
# create app/components/example-component.js
# create app/templates/components/example-component.hbs
# create tests/integration/components/example-component-test.js

组件应该由两部分构成:

  1. A template that defines how it will look (app/templates/components/xxx.hbs)

  2. A JavaScript source file (app/components/xxx.js) that defines how it will behave.

<!-- app/templates/components/example-component.hbs -->

{{title}}
<ul>
    {{#each examples as |example|}}
        <li>{{example}}</li>
    {{/each}}
</ul>
import Ember from 'ember';

export default Ember.Component.extend({
});
<!-- app/templates/example.hbs -->
<!-- 使用component template -->
{{example-component title="List of Examples" examples=model}}

DONE.

ember command line

# $ ember generate XXX
# 可简写为 $ ember g XXX

# 创建名为application的模板
$ ember g template application
# application模板会贯穿各页面

# 创建router - example
$ ember g route example
# or ember g route example
# 会连带着创建路由和模板：
# create app/routes/example.js
# create app/templates/example.hbs
# 并在 app/router.js中新增router：
# add route example
# 同时创建对应的测试：
# create tests/unit/routes/example-test.js

# 如果有模板需要复用，则可以创建组件
$ ember g component example-component
# 会连带着创建组件和模板：
# create app/components/example-component.js
# create app/templates/components/example-component.hbs
# 同时创建对应的测试
# create tests/integration/components/example-component-test.js

# 创建model
$ ember g model example
# create app/models/about.js
# create tests/unit/models/about-test.js

# build
$ ember build
# 已生产环境打包（hash、压缩）
$ ember build --env production

# server
$ ember server
# or ember s
# listen to http://localhost:4200

从command line就能体会出，ember试图帮你做好其他多余的事情，让开发者更专注于生产