Ember 新建、更新、删除记录

}});输入上如所示信息，点击“保存”可以在firebase的后台看到如下的数据关联关系。注意点：与这两个数据的关联是通过数据的id维护的。那么如果我要通过article获取user的信息要怎么获取呢？直接以面向对象的方式获取既可。{{#each model as |item|}} <li class="list-group-item"> {{#link-to 'articles.article' item.id}} {{item.title}} -- <small>{{item.category}}</small> -- <small>{{item.author.username}}</small> {{/link-to}} </li>{{/each}}注意看助手{{ item.author.username }}。很像EL表达式吧！！前面提到过有两个方式设置两个模型的关联关系。下面的代码是第二种方式：// 其他代码省略……// 创建articlevar article = this.store.createRecord('article', { title: title, body: body, category: category, timestamp: new Date().getTime() // , // author: user //设置关联});// 第二种设置关联关系方法，在外部手动调用set方法设置article.set('author', user);// 其他代码省略……运行，重新录入信息，得到的结果是一致的。甚至你可以直接在createRecord方法里调用方法来设置两个模型的关系。比如下面的代码段：var store = this.store; // 由于作用域问题，在createRecord方法内部不能使用this.storevar article = this.store.createRecord('article', { title: title, // …… // , // author: store.findRecord('user', 1) //设置关联});// 第二种设置关联关系方法，在外部手动调用set方法设置article.set('author', store.findRecord('user', 1));这种方式可以直接动态根据user的id属性值获取到记录，再设置关联关系。新增介绍完了，接着介绍记录的更新。2，更新记录更新相对于新增来说非常相似。请看下面的代码段：首先在模板上增加更新的设置代码，修改子模板articles/article.hbs：<h1>{{model.title}}</h1><div class = "body">{{model.body}}</div><div><br><hr>更新测试<br>title: {{input value=model.title}}<br>body：<br> {{textarea value=model.body cols="80" rows="3"}}<br><button {{action 'updateArticleById' model.id}}>更新文章信息</button></div>增加一个controller，用户处理子模板提交的修改信息。ember g controller articles/article// app/controllers/articles/article.jsimport Ember from 'ember';export default Ember.Controller.extend({ actions: { // 根据文章id更新 updateArticleById: function(params) { var title = this.get('model.title'); var body = this.get('model.body'); this.store.findRecord('article', params).then(function(art) { art.set('title', title); art.set('body', body); // 保存更新的值到Store art.save(); }); } }});在左侧选择需要更新的数据，然后在右侧输入框中修改需要更新的数据，在修改过程中可以看到被修改的信息会立即反应到界面上，这个是因为Ember自动更新Store中的数据（还记得很久前讲过的观察者（observer）吗？）。如果你没有点击“更新文章信息”提交，你修改的信息不会更新到firebase。页面刷新后还是原来样子，如果你点击了“更新文章信息”数据将会把更新的信息提交到firebase。由于save、findRecord方法返回值是一个promises对象，所以你还可以针对出错情况进行处理。比如下面的代码：var user = this.store.createRecord('user', { // ……});user.save().then(function(fulfill) { // 保存成功}).catch(function(error) { // 保存失败});this.store.findRecord('article', params).then(function(art) { // ……}).catch(function(error) { // 出错处理代码});具体代码我就不演示了，请读者自己编写测试吧！！3，删除记录既然有了新增那么通常就会有删除。记录的删除与修改非常类似，也是首先查询出要删除的数据，然后执行删除。// app/controllers/articles.jsimport Ember from 'ember';export default Ember.Controller.extend({ actions: { // 表单提交，保存数据到Store。Store会自动更新到firebase saveItem: function() { // 省略 }, // 根据id属性值删除数据 delById : function(params) { // 任意获取一个作为判断表单输入值 if (params && confirm("你确定要删除这条数据吗？?")) { // 执行删除 this.store.findRecord('article', params).then(function(art) { art.destroyRecord(); alert('删除成功！'); }, function(error) { alert('删除失败！'); }); } else { return; } } }});修改显示数据的模板，增加删除按钮，并传递数据的id值到controller。<div class="container"> <div class="row"> <div class="col-md-4 col-xs-4"> <ul class="list-group"> {{#each model as |item|}} <li class="list-group-item"> {{#link-to 'articles.article' item.id}} {{item.title}} -- <small>{{item.category}}</small> -- <small>{{item.author.username}}</small> {{/link-to}} <button {{action 'delById' item.id}}>删除</button> </li> {{/each}} </ul> // ……省略其他代码 </div></div>结果如上图，点击第二条数据删除按钮。弹出提示窗口，点击“确定”之后成功删除数据，并弹出“删除成功！”，到firebase后台查看数据，确实已经删除成功。然而与此关联的user却没有删除，正常情况下也应该是不删除关联的user数据的。最终结果只剩下一条数据：到此，有关新增、更新、删除的方法介绍完毕。已经给出了详细的演示实例，我相信，如果你也亲自在自己的项目中实践过，那么掌握这几个方法是很容易的！博文完整代码放在Github（博文经过多次修改，博文上的代码与github代码可能有出入，不过影响不大！），如果你觉得博文对你有点用，请在github项目上给我点个star吧。您的肯定对我来说是最大的动力！！