课程表

Ember.js 基础

Ember.js 对象模型

Ember.js handlebars模板

Ember.js 路由

Ember.js 组件

Ember.js 控制器

Ember.js 模型

Ember.js 测试

工具箱
速查手册

新建、更新、删除记录

当前位置：免费教程 » JS/JS库/框架 » Ember.js

前一篇介绍了查询方法，本篇介绍新建、更新、删除记录的方法。 本篇的示例代码创建在上一篇的基础上。对于整合firebase、创建route和template请参看上一篇，增加一个controller：ember g controller articles。

1，新建记录

创建新的记录使用createRecord()方法。比如下面的代码新建了一个aritcle记录。修改模板，在模板上增加几个input输入框用于输入article信息。

  1. <!--  app/templates/articles.hbs  -->
  3. <div class="container">  
  4.     <div class="row">
  5.         <div class="col-md-4 col-xs-4">
  6.             <ul class="list-group">
  7.             {{#each model as |item|}}
  8.                 <li class="list-group-item">
  9.                     <!--设置路由，路由的层级与router.js里定义的要一致 -->
  10.                      {{#link-to 'articles.article' item.id}}
  11.                         {{item.title}} -- <small>{{item.category}}</small>
  12.                     {{/link-to}}
  13.                 </li>
  14.             {{/each}}
  15.             </ul>
  18.             <div>
  19.                 title：{{input value=title}}<br>
  20.                 body： {{textarea value=body cols="80" rows="3"}}<br>
  21.                 category: {{input value=category}}<br>
  22.                 <button {{ action "saveItem"}}>保存</button>
  23.                 <font color='red'>{{tipInfo}}</font>
  24.             </div>
  25.         </div>
  27.         <div class="col-md-8 col-xs-8">
  28.         {{outlet}}
  29.         </div>
  30.     </div>
  31. </div>

页面的字段分别对应这模型article的属性。点击“保存”后提交到controller处理。下面是获取数据保存数据的controller。

  1. //   app/controllers/articles.js
  3. import Ember from 'ember';
  5. export default Ember.Controller.extend({
  7.     actions: {
  9.         //  表单提交，保存数据到Store。Store会自动更新到firebase
  10.         saveItem: function() {
  11.             var title = this.get('title');
  12.             if ('undefined' === typeof(title) || '' === title.trim()) {
  13.                 this.set('tipInfo', "title不能为空");
  14.                 return ;
  15.             }
  17.             var body = this.get('body');
  18.             if ('undefined' === typeof(body) || '' === body.trim()) {
  19.                 this.set('tipInfo', "body不能为空");
  20.                 return ;
  21.             }
  22.             var category = this.get('category');
  23.             if ('undefined' === typeof(category) || '' === category.trim()) {
  24.                 this.set('tipInfo', "category不能为空");
  25.                 return ;
  26.             }
  28.             //  创建数据记录
  29.             var article = this.store.createRecord('article', {
  30.                 title: title,
  31.                 body: body,
  32.                 category: category,
  33.                 timestamp: new Date().getTime()
  34.             });
  35.             article.save();  //保存数据的到Store
  36.             //  清空页面的input输入框
  37.             this.set('title', "");
  38.             this.set('body', "");
  39.             this.set('category', "");
  40.         }
  41.     }
  42. });

主要看createRecord方法，第一个参数是模型名称。第二个参数是个哈希，在哈希总设置模型属性值。最后调用article.save()方法把数据保存到Store，再由Store保存到firebase。运行效果如下图：

结果截图

输入信息，点击“保存”后数据立刻会显示在列表”no form -- java”之后。然后你可以点击标题查询详细信息，body的信息会在页面后侧显示。

通过这里实例我想你应该懂得去使用createRecord()方法了！但是如果有两个模型是有关联关系保存的方法又是怎么样的呢？下面再新增一个模型。

  1. ember g model users

然后在模型中增加关联。

  1. //   app/models/article.js
  3. import DS from 'ember-data';
  5. export default DS.Model.extend({  
  6.     title: DS.attr('string'),
  7.     body: DS.attr('string'),
  8.     timestamp: DS.attr('number'),
  9.     category: DS.attr('string'),
  10.     author: DS.belongsTo('user')  //关联user
  11. });
  14. //  app/models/user.js
  15. import DS from 'ember-data';
  17. export default DS.Model.extend({  
  18.       username: DS.attr('string'),
  19.       timestamp: DS.attr('number'),
  20.       articles: DS.hasMany('article')  //关联article
  21. });

修改模板articles.hbs在界面上增加录入作者信息字段。

  1. ……省略其他代码
  2. <div>  
  3.     title：{{input value=title}}<br>
  4.     body： {{textarea value=body cols="80" rows="3"}}<br>
  5.     category: {{input value=category}}<br>
  6.     <br>
  7.     author: {{input value=username}}<br>
  8.     <button {{ action "saveItem"}}>保存</button>
  9.     <font color='red'>{{tipInfo}}</font>
  10. </div>  
  11. ……省略其他代码

下面看看怎么在controller中设置这两个模型的关联关系。一共有两种方式设置，一种是直接在createRecord()方法中设置，另一种是在方法外设置。

  1. //   app/controllers/articles.js
  3. import Ember from 'ember';
  5. export default Ember.Controller.extend({
  7.     actions: {
  9.         //  表单提交，保存数据到Store。Store会自动更新到firebase
  10.         saveItem: function() {
  11.             //  获取信息和校验代码省略……
  13.             // 创建user
  14.             var user = this.store.createRecord('user', {
  15.                 username: username,
  16.                 timestamp: new Date().getTime()
  17.             });
  18.             //  必须要执行这句代码，否则user数据不能保存到Store，
  19.             //  否则article通过user的id查找不到user
  20.             user.save();
  22.             //  创建article
  23.             var article = this.store.createRecord('article', {
  24.                 title: title,
  25.                 body: body,
  26.                 category: category,
  27.                 timestamp: new Date().getTime(),
  28.                 author: user   //设置关联
  29.             });
  31.             article.save();  //保存数据的到Store
  32.             //  清空页面的input输入框
  33.             this.set('title', "");
  34.             this.set('body', "");
  35.             this.set('category', "");
  36.             this.set('username', "");
  37.         }
  38.     }
  39. });

界面截图

输入上如所示信息，点击“保存”可以在firebase的后台看到如下的数据关联关系。

firebase数据截图

注意点：与这两个数据的关联是通过数据的id维护的。 那么如果我要通过article获取user的信息要怎么获取呢？

直接以面向对象的方式获取既可。

  1. {{#each model as |item|}}
  2.     <li class="list-group-item">
  3.         <!--设置路由，路由的层级与router.js里定义的要一致 -->
  4.          {{#link-to 'articles.article' item.id}}
  5.             {{item.title}} -- <small>{{item.category}}</small> -- <small>{{item.author.username}}</small>
  6.         {{/link-to}}
  7.     </li>
  8. {{/each}}

注意看助手{{ item.author.username }}。很像EL表达式吧！！ 前面提到过有两个方式设置两个模型的关联关系。下面的代码是第二种方式：

  1. //  其他代码省略……
  2. //  创建article
  3. var article = this.store.createRecord('article', {  
  4.     title: title,
  5.     body: body,
  6.     category: category,
  7.     timestamp: new Date().getTime()
  8.     // ,
  9.     // author: user   //设置关联
  10. });
  12. // 第二种设置关联关系方法，在外部手动调用set方法设置
  13. article.set('author', user);  
  14. //  其他代码省略……

运行，重新录入信息，得到的结果是一致的。甚至你可以直接在createRecord方法里调用方法来设置两个模型的关系。比如下面的代码段：

  1. var store = this.store;  // 由于作用域问题，在createRecord方法内部不能使用this.store  
  2. var article = this.store.createRecord('article', {  
  3.     title: title,
  4.     // ……
  5.     // ,
  6.     // author: store.findRecord('user', 1)   //设置关联
  7. });
  9. // 第二种设置关联关系方法，在外部手动调用set方法设置
  10. article.set('author', store.findRecord('user', 1));

这种方式可以直接动态根据user的id属性值获取到记录，再设置关联关系。新增介绍完了，接着介绍记录的更新。

2，更新记录

更新相对于新增来说非常相似。请看下面的代码段： 首先在模板上增加更新的设置代码，修改子模板articles/article.hbs：

  1. <!--  app/templates/articles/article.hbs  -->
  3. <h1>{{model.title}}</h1>  
  4. <div class = "body">  
  5. {{model.body}}
  6. </div>
  8. <div>  
  9. <br><hr>  
  10. 更新测试<br>
  11. title: {{input value=model.title}}<br>  
  12. body：<br> {{textarea value=model.body cols="80" rows="3"}}<br>  
  13. <button {{action 'updateArticleById' model.id}}>更新文章信息</button>  
  14. </div>

增加一个controller，用户处理子模板提交的修改信息。

  1. ember g controller articles/article  
  1. //  app/controllers/articles/article.js
  3. import Ember from 'ember';
  5. export default Ember.Controller.extend({  
  6.     actions: {
  7.         // 根据文章id更新
  8.         updateArticleById: function(params) {
  9.             var title = this.get('model.title');
  10.             var body = this.get('model.body');
  11.             this.store.findRecord('article', params).then(function(art) {
  12.                 art.set('title', title);
  13.                 art.set('body', body);
  15.                 //  保存更新的值到Store
  16.                 art.save();
  17.             });
  18.         }
  19.     }
  20. });

在左侧选择需要更新的数据，然后在右侧输入框中修改需要更新的数据，在修改过程中可以看到被修改的信息会立即反应到界面上，这个是因为Ember自动更新Store中的数据（还记得很久前讲过的观察者（observer）吗？）。

结果截图

如果你没有点击“更新文章信息”提交，你修改的信息不会更新到firebase。页面刷新后还是原来样子，如果你点击了“更新文章信息”数据将会把更新的信息提交到firebase。

由于save、findRecord方法返回值是一个promises对象，所以你还可以针对出错情况进行处理。比如下面的代码：

  1. var user = this.store.createRecord('user', {  
  2.     //  ……
  3. });
  4. user.save().then(function(fulfill) {  
  5.     //  保存成功
  6. }).catch(function(error) {
  7.     //  保存失败
  8. });
  10. this.store.findRecord('article', params).then(function(art) {  
  11.     //  ……
  12. }).catch(function(error) {
  13.     //  出错处理代码
  14. });

具体代码我就不演示了，请读者自己编写测试吧！！

3，删除记录

既然有了新增那么通常就会有删除。记录的删除与修改非常类似，也是首先查询出要删除的数据，然后执行删除。

  1. //   app/controllers/articles.js
  3. import Ember from 'ember';
  5. export default Ember.Controller.extend({
  7.     actions: {
  9.         //  表单提交，保存数据到Store。Store会自动更新到firebase
  10.         saveItem: function() {
  11.             // 省略
  12.         },
  13.         //  根据id属性值删除数据
  14.         delById : function(params) {
  16.             //  任意获取一个作为判断表单输入值
  17.             if (params && confirm("你确定要删除这条数据吗？?")) {
  18.                 //  执行删除
  19.                 this.store.findRecord('article', params).then(function(art) {
  20.                     art.destroyRecord();
  21.                     alert('删除成功！');
  22.                 }, function(error) {
  23.                     alert('删除失败！');
  24.                 });
  25.             } else {
  26.                 return;
  27.             }
  29.         }
  30.     }
  31. });

修改显示数据的模板，增加删除按钮，并传递数据的id值到controller。

  1. <!--  app/templates/articles.hbs  -->
  3. <div class="container">  
  4.     <div class="row">
  5.         <div class="col-md-4 col-xs-4">
  6.             <ul class="list-group">
  7.             {{#each model as |item|}}
  8.                 <li class="list-group-item">
  9.                     <!--设置路由，路由的层级与router.js里定义的要一致 -->
  10.                      {{#link-to 'articles.article' item.id}}
  11.                         {{item.title}} -- <small>{{item.category}}</small> -- <small>{{item.author.username}}</small>
  12.                     {{/link-to}}
  13.                     <button {{action 'delById' item.id}}>删除</button>
  14.                 </li>
  15.             {{/each}}
  16.             </ul>
  17.         // ……省略其他代码
  18.     </div>
  19. </div>

截图

结果如上图，点击第二条数据删除按钮。弹出提示窗口，点击“确定”之后成功删除数据，并弹出“删除成功！”，到firebase后台查看数据，确实已经删除成功。 然而与此关联的user却没有删除，正常情况下也应该是不删除关联的user数据的。 最终结果只剩下一条数据：

截图

到此，有关新增、更新、删除的方法介绍完毕。已经给出了详细的演示实例，我相信，如果你也亲自在自己的项目中实践过，那么掌握这几个方法是很容易的！

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号