store提供了統(tǒng)一的獲取數(shù)據(jù)的接口。包括創(chuàng)建新記錄、修改記錄、刪除記錄等,更多有關(guān)Store API請(qǐng)點(diǎn)擊網(wǎng)址看詳細(xì)信息。
為了演示這些方法的使用我們結(jié)合firebase,關(guān)于firebase與Ember的整合前面的文章已經(jīng)介紹,就不過(guò)多介紹了。 做好準(zhǔn)備工作:
ember g route articles
ember g route articles/article
首先配置route
,修改子路由增加一個(gè)動(dòng)態(tài)段article_id
,有關(guān)動(dòng)態(tài)的介紹請(qǐng)看Dynamic Segments。
// app/router.js
// 其他代碼略寫,
Router.map(function() {
this.route('store-example');
this.route('articles', function() {
this.route('article', { path: '/:article_id' });
});
});
下面是路由代碼,這段代碼直接調(diào)用Store的find方法,返回所有數(shù)據(jù)。
// app/routes/articles.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
// 返回firebase數(shù)據(jù)庫(kù)中的所有article
return this.store.findAll('article');
}
});
為了界面看起來(lái)舒服點(diǎn)我引入了bootstrap框架。引入的方式:bower install bootstrap
安裝插件。然后修改ember-cli-build.js
,在return
之前引入bootstrap:
app.import("bower_components/bootstrap/dist/js/bootstrap.js");
app.import("bower_components/bootstrap/dist/css/bootstrap.css");
重啟項(xiàng)目使其生效。
下面是顯示數(shù)據(jù)的模板articles.hbs
。
<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}}
{{/link-to}}
</li>
{{/each}}
</ul>
</div>
<div class="col-md-8 col-xs-8">
{{outlet}}
</div>
</div>
</div>
在瀏覽器運(yùn)行:http://localhost:4200/articles/。稍等就可以看到顯示的數(shù)據(jù)了,等待時(shí)間與你的網(wǎng)速有關(guān)。畢竟firebase不是在國(guó)內(nèi)的!?。∪绻绦虼a沒(méi)有寫錯(cuò)那么你會(huì)看到如下圖的結(jié)果:
但是右側(cè)是空白的,下面點(diǎn)擊任何一條數(shù)據(jù),可以看到右側(cè)什么都不顯示! 下面在子模板中增加顯示數(shù)據(jù)的代碼:
<h2>{{model.title}}</h2>
<div class = "body">
{{model.body}}
</div>
在點(diǎn)擊左側(cè)的數(shù)據(jù),右側(cè)可以顯示對(duì)應(yīng)的數(shù)據(jù)了!但是這個(gè)怎么就顯示出來(lái)了呢??其實(shí)Ember自動(dòng)根據(jù)動(dòng)態(tài)段過(guò)濾了,當(dāng)然你也可以顯示使用findRecord
方法過(guò)濾。
// app/routes/articles/article.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
console.log('params = ' + params.article_id);
// 'chendequanroob@gmail.com'
return this.store.findRecord('article', params.article_id);
}
});
此時(shí)得到的結(jié)果與不調(diào)用findRecord
方法是一致的。為了驗(yàn)證是不是執(zhí)行了這個(gè)方法,我們把動(dòng)態(tài)段params.article_id
的值改成一個(gè)不存在的值’ ubuntuvim’,可以確保的是在我的firebase數(shù)據(jù)中不存在id
為這個(gè)值的數(shù)據(jù)。此時(shí)控制臺(tái)會(huì)出現(xiàn)下面的錯(cuò)誤信息,從錯(cuò)誤信息可以看出來(lái)是因?yàn)橛涗洸淮嬖诘脑颉?/p>
在上述的例子中,我們使用了findAll()
方法和findRecord()
方法,還有兩個(gè)方法與這兩個(gè)方法是類似的,分別是peekRecord()
和peekAll()
方法。這兩個(gè)方法的不同之處是不會(huì)發(fā)送請(qǐng)求,他們只會(huì)在本地緩存中獲取數(shù)據(jù)。
下面分別修改articles.js
和article.js
這兩個(gè)路由。使用peekRecord()
和peekAll()
方法測(cè)試效果。
// app/routes/articles.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
// 返回firebase數(shù)據(jù)庫(kù)中的所有article
// return this.store.findAll('article');
return this.store.peekAll('article');
}
});
由于沒(méi)有發(fā)送請(qǐng)求,我也沒(méi)有把數(shù)據(jù)存儲(chǔ)到本地,所以這個(gè)調(diào)用什么數(shù)據(jù)都沒(méi)有。
// app/routes/articles/article.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
// return this.store.findRecord('article', params.article_id);
return this.store.peekRecord('article', params.article_id);
}
});
由于在父路由中調(diào)用findAll
獲取到數(shù)據(jù)并已經(jīng)存儲(chǔ)到Store
中,所以可以用peekRecord()
方法獲取到數(shù)據(jù)。 但是在模型簡(jiǎn)介這篇文章介紹過(guò)Store
的特性,當(dāng)界面獲取數(shù)據(jù)的時(shí)候首先會(huì)在Store
中查詢數(shù)據(jù)是否存在,如果不存在在再發(fā)送請(qǐng)求獲取,所以感覺(jué)peekRecord()
和findRecord()
方法區(qū)別不是很大!
項(xiàng)目中經(jīng)常會(huì)遇到根據(jù)某個(gè)值查詢出一組匹配的數(shù)據(jù)。此時(shí)返回的數(shù)據(jù)就不是只有一條了,那么Ember有是怎么去實(shí)現(xiàn)的呢?
// app/routes/articles.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
// 返回firebase數(shù)據(jù)庫(kù)中的所有article
// return this.store.findAll('article');
// return this.store.peekAll('article');
// 使用query方法查詢category為Java的數(shù)據(jù)
return this.store.query('article', { filter: { category: 'java' } }).then(function(item) {
// 對(duì)匹配的數(shù)據(jù)做處理
return item;
});
}
});
查詢category
為Java
的數(shù)據(jù)。如果你只想精確查詢到某一條數(shù)據(jù)可以使用queryRecord()
方法。如下:
this.store.queryRecord('article', { filter: { id: ' -JzyT-VLEWdF6zY3CefO' } }).then(function(item) {
// 對(duì)匹配的數(shù)據(jù)做處理
});
到此,常用的方法介紹完畢,希望通過(guò)介紹上述幾個(gè)方法起到拋磚引玉的效果,有關(guān)于DS.Store類的還有很多很多的方法,使用方式都是類似的,更多方法請(qǐng)自己看API文檔學(xué)習(xí)。
博文完整代碼放在Github(博文經(jīng)過(guò)多次修改,博文上的代碼與github代碼可能有出入,不過(guò)影響不大!),如果你覺(jué)得博文對(duì)你有點(diǎn)用,請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star
吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力??!
更多建議: