EmberJS 入门指南

现在，我们经常可以看到复杂的 `JavaScript` 应用程序，一长串的 `jQuery` 回调语句或者通过应用程序在各个状态执行不同的函数调用，这些做法都会变得无法再让人接受，这导致了 `JavaScript` 开发人员开始寻找一种组织和效率更优秀的开发方式。

实现组织和效率其中一个最常用的架构模式，就是我们熟知的  `Model View Controller （MVC）` 模式，这种模式鼓励开发人员将其应用程序的不同部分分割为更易于管理的模块，我们不必使用一个函数直接调用数据库，通过创建了一个 模型 `Model` 来管理数据库；通过模板 `Template` 或视图`View` 来简化显示代码； 最后，通过使用控制器 `Controller` 来处理我们的应用程序请求，`MVC` 模式尽量降低每个模块之间的耦合度，提供程序的开发效率。

我们熟知的`Javascript MVC`框架有：`Ember.js`、`Backbone.js`、`Knockout.js`、`Spine.js`、`Batman.js` 和 `Angular.js`等。

今天我们就来简单了解一下 `EmberJs 框架`，我们将做一个可以自定义书签的社交化分享应用，你可以在[这里](http://yixunfe.github.io/blog/demo/40/index.html) 查看这个应用，这个应用可以做到：
- 当用户访问`/`时，会看到最近更新的分享列表：

![list](https://cloud.githubusercontent.com/assets/9649921/11761214/2e20feb8-a0f4-11e5-9f5e-919665902807.png)
- 当用户访问某个书签`#/bookmarks/1rim9`时，会看到书签相关信息，例如标题，作者，时间，标签及摘要：

![detail](https://cloud.githubusercontent.com/assets/9649921/11761233/d143602c-a0f4-11e5-864a-899ed56f85aa.png)
- 最后，用户可以自己创建书签并提交，内容会存储在浏览器的本地存储当中：

![add](https://cloud.githubusercontent.com/assets/9649921/11712539/cfe6148c-9f68-11e5-95d8-838906f183a0.png)
## 一、Ember核心？

1、模型：模型代表我们展示给用户的应用领域内的对象。在上述例子中，一个书签就代表一个模型，包括它的标题、摘要、作者和链接。模型可以通过 `jQuery` 加载服务器端的 `JSON` 数据，也可以通过 [Ember Data](https://github.com/emberjs/data) 来获取和更新。`Ember Data`  是一个客户端的 `ORM` 实现，可以利用它方便地对底层的持久性存储进行 `CURD` 操作。`Ember Data`  提供一个仓库接口，可以借助提供一些适配器配置。 `Ember Data` 提供的两个核心适配器是 `RESTAdapter` 和 `FixtureAdapter` 适配器。在本文中，我们将使用 `LocalStorage` 适配器，该适配器将数据持久化为 `HTML5` 的 `LocalStorage`。详情请参考 [此文档](http://guides.emberjs.com/v1.10.0/models/)。

2、路由器和路由：路由器指定应用的所有路由，路由器将 `URL` 映射到路由。例如，当用户访问
`#/bookmark/new` 的时候，将渲染 `newbookmark` 模版。该模版展现了一个 `HTML` 表单，用户可以通过创建 `Ember.Route` 子类来定制路由。在上述例子中，用户访问 `#/bookmark/new` 将渲染一个基于 `newbookmark` 模版的默认模型。`NewBookmarkRoute` 会负责将默认的模型分配给 `newbookmark` 模版。详情请参考 [此文档](http://emberjs.com/guides/controllers/)。

3、控制器：控制器可以做两件事——首先它装饰路由返回的模型，接着它监听用户执行的行动。例如，当用户提交表单的时候，`NewBookmarkController` 负责通过`Ember Data API` 将表单的数据持续化到存储层。详情请参考 [此文档](http://emberjs.com/guides/controllers/)。
## 二、创建应用
### 1、设置 Ember

`Ember` 依赖于 [jQuery](http://jquery.com/)  和  [Handlebars](http://handlebarsjs.com/) 库。为美观这里用 [Bootstrap](http://v3.bootcss.com/css/) 来添加样式。我们把一系列 `js` 文件保存到本地，`app.js` 是应用程序代码，`localstorage_adapter.js` 是本地存储代码，`moment.min.js` 是日期格式化代码。接下来创建 `index.html` 页面：

``` html
<!DOCTYPE html>
<html>
      <head>
           <meta charset="utf-8" />
           <title>EmberJS</title>
           <link rel="stylesheet" href="css/normalize.css">
           <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
           <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
           <script type="text/x-handlebars">
               <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                   <div class="container">
                       <div class="navbar-header">
                           <a class="navbar-brand" href="#">书签</a>
                       </div>

                   </div>
               </nav>
               <div id="main" class="container">
                   {{outlet}}
               </div>
           </script>

           <script src="js/libs/jquery-1.9.1.js"></script>
           <script src="js/libs/handlebars-1.0.0.js"></script>
           <script src="js/libs/ember-1.1.2.js"></script>
           <script src="js/libs/ember-data.js"></script>
           <script src="js/libs/localstorage_adapter.js"></script>
           <script src="js/libs/moment.min.js"></script>
           <script src="js/app.js"></script>
      </body>
</html>
```

上述 `html` 中，`<script type="text/x-handlebars">` 代表我们的应用模版。应用模版使用 `{{outlet}}` 标签为其他模版预留位置，其内容取决于 `url`。
### 2、新建模版

我们首先实现提交新书签的功能。当用户访问 `#/bookmark/new` 的时候，会展示一个表单。
在 `App.Router.Map` 中增加一个绑定 `#bookmark/new` 的新路由：

``` javascript
// app.js
App = Ember.Application.create();
App.Router.map(function() {
  this.resource('newbookmark' , {path : 'bookmark/new'});
});
```

接着我们在 `index.html` 中添加一个渲染表单的 `newbookmark` 模板：

``` html
<script type="text/x-handlebars" id="newbookmark">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-10">
                <input type="title" class="form-control" id="title" name="title" placeholder="标题" required>
            </div>
        </div>
        <div class="form-group">
            <label for="excerpt" class="col-sm-2 control-label">摘要</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="excerpt" name="excerpt" placeholder="摘要" required></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="url" class="form-control" id="url" name="url" placeholder="链接地址" required>
            </div>
        </div>
        <div class="form-group">
            <label for="tags" class="col-sm-2 control-label">标签</label>
            <div class="col-sm-10">
                <textarea id="tags" class="form-control" name="tags" placeholder="逗号分隔标签" rows="3" required></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="fullname" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="fullname" name="fullname" placeholder="请输入自己的姓名" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success" {{action 'save'}}>提交</button>
            </div>
        </div>
    </form>
</script>
```

访问 `#/bookmark/new` 即可查看表单：

![add](https://cloud.githubusercontent.com/assets/9649921/11712545/dff8f664-9f68-11e5-85f5-3f0ff2acdc65.png)

接着我们在首页导航条中添加一个链接，这样可以在导航中直接访问：

``` html
<script type="text/x-handlebars">
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">书签</a>
            </div>
            <ul class="nav navbar-nav pull-right">
                <li>{{#link-to 'newbookmark'}}<span class="glyphicon glyphicon-plus"></span> 新建{{/link-to}}</li>
            </ul>
        </div>
    </nav>
    <div id="main" class="container">
        {{outlet}}
    </div>
</script>
```

上面我们用 `{{#link-to}}` 创建了一个指向路由的链接。详情请参考[此文档](http://emberjs.com/guides/templates/links/)。
### 3、存储数据

如前所述，`Ember Data` 是一个客户端的 `ORM` 实现，它使在底层存储进行 `CRUD` 操作很容易。这里我们将使用 `LSAdapter`。在 `app.js` 中加入：

``` javascript
App.ApplicationAdapter = DS.LSAdapter.extend({
    namespace: 'bookmarks'
});
```

接着，定义数据模型，分别有标题、摘要、地址、标签、姓名。在下面的模型中，我们使用了字符串和日期类型。适配器默认支持的属性类型为字符串、数字、布尔值和日期。

``` javascript
App.Bookmark = DS.Model.extend({
    title : DS.attr('string'),
    excerpt : DS.attr('string'),
    url : DS.attr('string'),
    tags : DS.attr('string'),
    fullname : DS.attr('string'),
    submittedOn : DS.attr('date'),

    tagnames : function(){
        var tags = this.get('tags').split(',');
        var tagArray = new Array();
        for(var i = 0;i<tags.length;i++ ){
            tagArray.push(tags[i].trim())
        }
      //  console.log(tagArray);
        return tagArray;
    }.property('tags')
});
```

接着我们编写 `NewbookmarkController` 来持久化内容：

``` javascript
App.NewbookmarkController = Ember.ObjectController.extend({
 actions :{
    save : function(){
        var url = $('#url').val();
        var tags = $('#tags').val();
        var fullname = $('#fullname').val();
        var title = $('#title').val();
        var excerpt = $('#excerpt').val();
        var submittedOn = new Date();
        var store = this.get('store');
        var bookmark = store.createRecord('bookmark',{
            url : url,
            tags : tags,
            fullname : fullname,
            title : title,
            excerpt : excerpt,
            submittedOn : submittedOn
        });
        bookmark.save();
        this.transitionToRoute('index');
    }
 }
});
```

以上代码展示了如何从获取表单中的值，然后使用 `store API` 在内存中创建记录。为了在`localstorage` 中存储记录，我们需要调用 `Bookmark` 对象的 `save` 方法。最后，我们将用户重定向到 `index` 路由。

接着我们测试下这个应用，创建一个新的标签，接着打开 `Chrome` 开发者工具，在资源区域你可以查看：

![ls](https://cloud.githubusercontent.com/assets/9649921/11712566/fb1d7fc8-9f68-11e5-8758-111031cd01e9.png)
### 4、显示列表

接着我们要做的是，当用户访问首页 `/` 的时候，展示所有列表。正如之前提到的，路由负责询问 `model`。我们将加上 `IndexRoute` ，它会找出本地存储中保存的所有内容：

``` javascript
App.IndexRoute = Ember.Route.extend({
    model : function(){
        var bookmarks = this.get('store').findAll('bookmark');
        return bookmarks;
    }
});
```

每个路由支持一个模板。`IndexRoute` 支持 `index` 模板，因此我们需要修改 `index.html` ：

``` html
<script type="text/x-handlebars" id="index">
    <div class="row">
        <div class="col-md-4">
            <table class='table'>
                <thead>
                <tr><th>最近更新</th></tr>
                </thead>
                {{#each content}}
                <tr><td>
                    {{#link-to 'bookmark' this}}
                    {{title}}
                    {{/link-to}}
                </td></tr>
                {{/each}}
            </table>
        </div>
        <div class="col-md-8">
            {{outlet}}
        </div>
    </div>
</script>
```

还有一个问题，列表没有按照时间顺序排列。我们将创建一个 `IndexController` 负责排序。我们指定依照 `submittedOn` 属性倒序排列，以确保新的书签出现在上面。

``` javascript
App.IndexController = Ember.ArrayController.extend({
    sortProperties : ['submittedOn'],
    sortAscending : false
});
```

现在访问 `/`，我们会看到下面列表：

![list](https://cloud.githubusercontent.com/assets/9649921/11712581/10191c98-9f69-11e5-80ba-3077b7ebec3d.png)
### 5、查看单个书签

最后要实现的功能是：用户点击某个书签的时候会看到详细信息。我们加一个路由：

``` javascript
App.Router.map(function() {
    this.resource('index',{path : '/'},function(){
        this.resource('bookmark', { path:'/bookmarks/:bookmark_id' });
    });
    this.resource('newbookmark' , {path : 'bookmark/new'});
});
```

以上的代码展示了如何嵌套路由。`:bookmark_id` 部分叫做动态字段，因为相应的 `id` 会被注入 `URL` ，然后我们添加根据书签 `id` 获取书签的 `BookmarkRoute`。

``` javascript
App.BookmarkRoute = Ember.Route.extend({
    model : function(params){
        var store = this.get('store');
        return store.find('bookmark',params.bookmark_id);
    }
});
```

最后，我们在 `index.html` 中添加下面代码：

``` html
<script type="text/x-handlebars" id="bookmark">
      <h1>{{title}}</h1>
      <h3><a {{ bind-attr href=url }} target='_blank'>链接</a></h3>
      <h2> by {{fullname}} <small class="muted">{{submittedOn}}</small></h2>
      {{#each tagnames}}
            <span class="label label-primary">{{this}}</span>
      {{/each}}
      <hr>
      <p class="lead">
          {{excerpt}}
      </p>
</script>
```

修改完成后，可以在浏览器中看到：

![de](https://cloud.githubusercontent.com/assets/9649921/11712728/da918ea6-9f69-11e5-97be-8d52648fc03f.png)
### 6、日期格式化

`Ember` 下有辅助函数的概念。所有 `Handlebars` 模板都可以调用辅助函数。我们将使用 `moment.js` 库为日期添加格式。在 `app.js` 文件中添加辅助函数：

``` javascript
Ember.Handlebars.helper('format-date', function(date){
    return moment(date).fromNow();
});
```

最后我们在模板中加入 `format-data` 辅助函数：

``` html
<script type="text/x-handlebars" id="bookmark">
      <h1>{{title}}</h1>
      <h3><a {{ bind-attr href=url }} target='_blank'>链接</a></h3>
      <h2> by {{fullname}} <small class="muted">{{format-date submittedOn}}</small></h2>
      {{#each tagnames}}
            <span class="label label-primary">{{this}}</span>
      {{/each}}
      <hr>
      <p class="lead">
          {{excerpt}}
      </p>
</script>
```
### 7、删除功能

到这里主要知识点已经介绍差不多了，接下来看一下删除功能，修改 `index.html` 中 `index` 模版：

``` html
<script type="text/x-handlebars" id="index">
    <div class="row">
        <div class="col-md-4">
            <table class='table'>
                <thead>
                <tr>
                    <th colspan="2">最近更新</th>
                </tr>
                </thead>
                {{#each controller itemController='BookmarkDel' }}
                <tr>
                    <td>
                        {{#link-to 'bookmark' this}}
                        {{title}}
                        {{/link-to}}
                    </td>
                    <td>
                        <button type="submit" class="btn btn-danger" {{action 'del' this}}>删除</button>
                    </td>
                </tr>
                {{/each}}
            </table>
        </div>
        <div class="col-md-8">
            {{outlet}}
        </div>
    </div>
</script>
```

在 `app.js` 中更新代码如下：

``` javascript
App.IndexController = Ember.ArrayController.extend({
    sortProperties: ['submittedOn'],
    sortAscending: false,
    itemController:'BookmarkDel'
});
App.BookmarkDelController = Ember.ObjectController.extend({
    actions: {
        del: function (record) {
            this.store.deleteRecord(record);
            record.save();
        }
    }
});
```

结果如下：

![detail](https://cloud.githubusercontent.com/assets/9649921/11761233/d143602c-a0f4-11e5-864a-899ed56f85aa.png)
### 8、编辑功能

`index.html` 修改如下：

``` html
<script type="text/x-handlebars" id="bookmark">
    <h1>{{title}}</h1>
    <h3><a {{ bind-attr href=url }} target='_blank'>链接</a></h3>
    <h2> by {{fullname}}
        <small class="muted">{{format-date submittedOn}}</small>
    </h2>
    {{#each tagnames}}
    <span class="label label-primary">{{this}}</span>
    {{/each}}
    <hr>
    <p class="lead">{{excerpt}}</p>
    <button type="submit" class="btn" {{action 'edit'}}>编辑</button>
    {{#if isediting}}
    {{partial 'bookmark/edit'}}
    {{/if}}
</script>
<script type="text/x-handlebars" id="bookmark/edit">
    <h1>{{input value=title class='form-control'}}</h1>
    <h4>{{input value=url class='form-control'}}</h4>
    <h2> by {{input value=fullname class='form-control'}} </h2>
    {{textarea value=tags class='textarea' class='form-control'}}
    <hr>
    {{textarea value=excerpt class='form-control' rows='3'}}
    <button type="submit" class="btn update btn-success" {{action 'update' this}}>更新</button>
</script>
```

在 `app.js` 中添加如下代码：

``` javascript
App.BookmarkController = Ember.ObjectController.extend({
    actions: {
       edit: function () {
            this.set('isediting', true);
        },
       update: function () {
            var content = this.get('content');
            this.set('submittedOn',new Date());
            content.save();
            this.set('isediting', false);
        }
    }
});
```

结果如下：

![mod](https://cloud.githubusercontent.com/assets/9649921/11761307/4222d22a-a0f8-11e5-9569-5665faedd8e2.png)
<br />
:yum::yum::yum:  好了，今天就到这里吧！

[查看demo](http://yixunfe.github.io/blog/demo/40/index.html)
<br />
参考资料：

[https://blog.openshift.com/day-19-ember-the-missing-emberjs-tutorial/](https://blog.openshift.com/day-19-ember-the-missing-emberjs-tutorial/)
[http://segmentfault.com/a/1190000000365519](http://segmentfault.com/a/1190000000365519)
[http://www.cnblogs.com/rush/archive/2013/04/29/3051191.html](http://www.cnblogs.com/rush/archive/2013/04/29/3051191.html)

<br />
## **Thanks**

<br/>


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

EmberJS 入门指南 #40

一、Ember核心？

二、创建应用

1、设置 Ember

2、新建模版

3、存储数据

4、显示列表

5、查看单个书签

6、日期格式化

7、删除功能

8、编辑功能

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

EmberJS 入门指南 #40

Description

一、Ember核心？

二、创建应用

1、设置 Ember

2、新建模版

3、存储数据

4、显示列表

5、查看单个书签

6、日期格式化

7、删除功能

8、编辑功能

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions