Ember 新建、更新、删除记录

由 ubuntu的疯狂 创建， 最后一次修改 2017-01-06 前一篇介绍了查询方法，本篇介绍新建、更新、删除记录的方法。本篇的示例代码创建在上一篇的基础上。对于整合firebase、创建route和template请参看上一篇，增加一个controller：ember g controller articles。1，新建记录创建新的记录使用createRecord()方法。比如下面的代码新建了一个aritcle记录。修改模板，在模板上增加几个input输入框用于输入article信息。<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> {{/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.jsimport 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()方法了！但是如果有两个模型是有关联关系保存的方法又是怎么样的呢？下面再新增一个模型。ember g model users然后在模型中增加关联。// app/models/article.jsimport 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.jsimport 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中设置这两个模型的关联关系。一共有两种方式设置，一种是直接在createRecord()方法中设置，另一种是在方法外设置。// app/controllers/articles.jsimport 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', ""); }