标签:
前一篇介绍了查询方法,本篇介绍新建、更新、删除记录的方法。
本篇的示例代码创建在上一篇的基础上。对于整合firebase、创建route和template请参看上一篇,增加一个controller:ember g controller articles。
创建新的记录使用createRecord()方法。比如下面的代码新建了一个aritcle记录。修改模板,在模板上增加几个input输入框用于输入article信息。
<!-- app/templates/articles.hbs --> <div> <div> <div class="col-md-4 col-xs-4"> <ul> {{#each model as |item|}} <li> <!--设置路由,路由的层级与router.js里定义的要一致 --> {{#link-to ‘articles.article‘ item.id}} {{item.title}} -- <small>{{item.category}}</small> {{/link-to}} </li> {{/each}} </ul> <div> title:{{input value=title}}<br> body: {{textarea value=body cols="80" rows="3"}}<br> category: {{input value=category}}<br> <button {{ action "saveItem"}}>保存</button> <font color=‘red‘>{{tipInfo}}</font> </div> </div> <div class="col-md-8 col-xs-8"> {{outlet}} </div> </div> </div>
页面的字段分别对应这模型article的属性。点击“保存”后提交到controller处理。下面是获取数据保存数据的controller。
// app/controllers/articles.js import Ember from ‘ember‘; export default Ember.Controller.extend({ actions: { // 表单提交,保存数据到Store。Store会自动更新到firebase saveItem: function() { var title = this.get(‘title‘); if (‘undefined‘ === typeof(title) || ‘‘ === title.trim()) { this.set(‘tipInfo‘, "title不能为空"); return ; } var body = this.get(‘body‘); if (‘undefined‘ === typeof(body) || ‘‘ === body.trim()) { this.set(‘tipInfo‘, "body不能为空"); return ; } var category = this.get(‘category‘); if (‘undefined‘ === typeof(category) || ‘‘ === category.trim()) { this.set(‘tipInfo‘, "category不能为空"); return ; } // 创建数据记录 var article = this.store.createRecord(‘article‘, { title: title, body: body, category: category, timestamp: new Date().getTime() }); article.save(); //保存数据的到Store // 清空页面的input输入框 this.set(‘title‘, ""); this.set(‘body‘, ""); this.set(‘category‘, ""); } } });
主要看createRecord方法,第一个参数是模型名称。第二个参数是个哈希,在哈希总设置模型属性值。最后调用article.save()方法把数据保存到Store,再由Store保存到firebase。运行效果如下图:
输入信息,点击“保存”后数据立刻会显示在列表”no form -- java”之后。然后你可以点击标题查询详细信息,body的信息会在页面后侧显示。
通过这里实例我想你应该懂得去使用createRecord()方法了!
但是如果有两个model是有关联关系保存的方法又是怎么样的呢?下面再新增一个model。
ember g model users
然后在model中增加关联。
// app/models/article.js import DS from ‘ember-data‘; export default DS.Model.extend({ title: DS.attr(‘string‘), body: DS.attr(‘string‘), timestamp: DS.attr(‘number‘), category: DS.attr(‘string‘), author: DS.belongsTo(‘user‘) //关联user });
// app/models/user.js import DS from ‘ember-data‘; export default DS.Model.extend({ username: DS.attr(‘string‘), timestamp: DS.attr(‘number‘), articles: DS.hasMany(‘article‘) //关联article });
修改模板articles.hbs在界面上增加录入作者信息字段。
……省略其他代码 <div> title:{{input value=title}}<br> body: {{textarea value=body cols="80" rows="3"}}<br> category: {{input value=category}}<br> <br> author: {{input value=username}}<br> <button {{ action "saveItem"}}>保存</button> <font color=‘red‘>{{tipInfo}}</font> </div> ……省略其他代码
下面看看怎么在controller中设置这两个model的关联关系。一共有两种方式设置,一种是直接在createRecord()方法中设置,另一种是在方法外设置。
// app/controllers/articles.js import Ember from ‘ember‘; export default Ember.Controller.extend({ actions: { // 表单提交,保存数据到Store。Store会自动更新到firebase saveItem: function() { // 获取信息和校验代码省略…… // 创建user var user = this.store.createRecord(‘user‘, { username: username, timestamp: new Date().getTime() }); // 必须要执行这句代码,否则user数据不能保存到Store, // 否则article通过user的id查找不到user user.save(); // 创建article var article = this.store.createRecord(‘article‘, { title: title, body: body, category: category, timestamp: new Date().getTime(), author: user //设置关联 }); article.save(); //保存数据的到Store // 清空页面的input输入框 this.set(‘title‘, ""); this.set(‘body‘, ""); this.set(‘category‘, ""); this.set(‘username‘, ""); } } });
界面如下图:
输入上如所示信息,点击“保存”可以在firebase的后台看到如下的数据关联关系。
注意点:与这两个数据的关联是通过数据的id维护的。
那么如果我要通过article获取user的信息要怎么获取呢?
直接以面向对象的方式获取既可以。
{{#each model as |item|}} <li> <!--设置路由,路由的层级与router.js里定义的要一致 --> {{#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表达式吧!!
前面提到过有两个方式设置两个model的关联关系。下面的代码是第二种方式:
// 其他代码省略…… // 创建article var article = this.store.createRecord(‘article‘, { title: title, body: body, category: category, timestamp: new Date().getTime() // , // author: user //设置关联 }); // 第二种设置关联关系方法,在外部手动调用set方法设置 article.set(‘author‘, user); // 其他代码省略……
运行,重新录入信息,得到的结果是一致的。甚至你可以直接在createRecord方法里调用方法来设置两个model的关系。比如下面的代码段:
var store = this.store; // 由于作用域问题,在createRecord方法内部不能使用this.store var article = this.store.createRecord(‘article‘, { title: title, // …… // , // author: store.findRecord(‘user‘, 1) //设置关联 }); // 第二种设置关联关系方法,在外部手动调用set方法设置 article.set(‘author‘, store.findRecord(‘user‘, 1));
这种方式可以直接动态根据user的id属性值获取到记录,再设置关联关系。
新增介绍完了,接着介绍记录的更新。
更新相对于新增来说非常相似。请看下面的代码段:
首先在模板上增加更新的设置代码,修改子模板articles/article.hbs:
<!-- app/templates/articles/article.hbs --> <h1>{{model.title}}</h1> <div> {{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.js import 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) { // 出错处理代码 });
具体代码我就不演示了,请读者自己编写测试吧!!
既然有了新增那么通常就会有删除。记录的删除与修改非常类似,也是首先查询出要删除的数据,然后执行删除。
// app/controllers/articles.js import 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。
<!-- app/templates/articles.hbs --> <div> <div> <div class="col-md-4 col-xs-4"> <ul> {{#each model as |item|}} <li> <!--设置路由,路由的层级与router.js里定义的要一致 --> {{#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数据的。
最终结果只剩下一条数据:
到此,有关新增、更新、删除的方法介绍完毕。已经给出了详细的演示实例,我相信,如果你也亲自在自己的项目中实践过,那么掌握这几个方法是很容易的!
标签:
原文地址:http://my.oschina.net/ubuntuvim/blog/519619