Ember.js 入門指南——新建、更新、刪除記錄
前一篇介紹了查詢方法，本篇介紹新建、更新、刪除記錄的方法。html
本篇的示例代碼建立在上一篇的基礎上。對於整合firebase、建立route和template請參看上一篇，增長一個controller：ember g controller articles。java
1，新建記錄
建立新的記錄使用createRecord()方法。好比下面的代碼新建了一個aritcle記錄。修改模板，在模板上增長几個input輸入框用於輸入article信息。promise
<!-- 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
// 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的信息會在頁面後側顯示。this
經過這裏實例我想你應該懂得去使用createRecord()方法了！spa
可是若是有兩個model是有關聯關係保存的方法又是怎麼樣的呢？下面再新增一個model。code
ember g model usersorm
而後在model中增長關聯。router
// 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屬性值獲取到記錄，再設置關聯關係。
新增介紹完了，接着介紹記錄的更新。
2，更新記錄
更新相對於新增來講很是類似。請看下面的代碼段：
首先在模板上增長更新的設置代碼，修改子模板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) {
// 出錯處理代碼
});
具體代碼我就不演示了，請讀者本身編寫測試吧！！
3，刪除記錄
既然有了新增那麼一般就會有刪除。記錄的刪除與修改很是相似，也是首先查詢出要刪除的數據，而後執行刪除。
// 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數據的。
最終結果只剩下一條數據：
到此，有關新增、更新、刪除的方法介紹完畢。已經給出了詳細的演示實例，我相信，若是你也親自在本身的項目中實踐過，那麼掌握這幾個方法是很容易的！
- 1. Ember.js 入門指南——目錄
- 2. Ember.js 入門指南--目錄
- 3. Ember.js 入門指南——查詢記錄
- 4. Ember.js 入門指南——總目錄
- 5. datagrid新增，刪除記錄
- 6. Ember.js 入門指南——{{link-to}} 助手
- 7. Ember.js 入門指南——查詢參數
- 8. Ember.js 入門指南——路由簡介
- 9. Ember.js 入門指南——定義模型
- 10. Ember.js 入門指南——枚舉（enumerables）
- 更多相關文章...
- • ADO 更新記錄 - ADO 教程
- • ADO 刪除記錄 - ADO 教程
- • YAML 入門教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。