Ember 記錄查詢

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)介紹，就不過多介紹了。 做好準(zhǔn)備工作：

ember g route articles
ember g route articles/article

1，查詢方法findAll，findRecord，peekAll，peekRecord

首先配置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沒有寫錯(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)段過濾了，當(dāng)然你也可以顯示使用findRecord方法過濾。

//  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');
    }
});

由于沒有發(fā)送請(qǐng)求，我也沒有把數(shù)據(jù)存儲(chǔ)到本地，所以這個(gè)調(diào)用什么數(shù)據(jù)都沒有。

//  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)介這篇文章介紹過Store的特性，當(dāng)界面獲取數(shù)據(jù)的時(shí)候首先會(huì)在Store中查詢數(shù)據(jù)是否存在，如果不存在在再發(fā)送請(qǐng)求獲取，所以感覺peekRecord()和findRecord()方法區(qū)別不是很大！

2，查詢多記錄方法query()

項(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ù)做處理
});

到此，常用的方法介紹完畢，希望通過介紹上述幾個(gè)方法起到拋磚引玉的效果，有關(guān)于DS.Store類的還有很多很多的方法，使用方式都是類似的，更多方法請(qǐng)自己看API文檔學(xué)習(xí)。

博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大?。?，如果你覺得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力！！