Ember 記錄查詢

store提供了統(tǒng)一的獲取數(shù)據(jù)的接口。包括創(chuàng)建新記錄、修改記錄、刪除記錄等，更多有關(guān)Store API請點擊網(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，修改子路由增加一個動態(tài)段article_id，有關(guān)動態(tài)的介紹請看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ù)庫中的所有article
        return this.store.findAll('article');
    }
});

為了界面看起來舒服點我引入了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");

重啟項目使其生效。

下面是顯示數(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>

在瀏覽器運行：http://localhost:4200/articles/。稍等就可以看到顯示的數(shù)據(jù)了，等待時間與你的網(wǎng)速有關(guān)。畢竟firebase不是在國內(nèi)的！??！如果程序代碼沒有寫錯那么你會看到如下圖的結(jié)果：

但是右側(cè)是空白的，下面點擊任何一條數(shù)據(jù)，可以看到右側(cè)什么都不顯示！ 下面在子模板中增加顯示數(shù)據(jù)的代碼：

<h2>{{model.title}}</h2>
<div class = "body">
{{model.body}}
</div>

在點擊左側(cè)的數(shù)據(jù)，右側(cè)可以顯示對應(yīng)的數(shù)據(jù)了！但是這個怎么就顯示出來了呢？？其實Ember自動根據(jù)動態(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);
    }
});

此時得到的結(jié)果與不調(diào)用findRecord方法是一致的。為了驗證是不是執(zhí)行了這個方法，我們把動態(tài)段params.article_id的值改成一個不存在的值’ ubuntuvim’，可以確保的是在我的firebase數(shù)據(jù)中不存在id為這個值的數(shù)據(jù)。此時控制臺會出現(xiàn)下面的錯誤信息，從錯誤信息可以看出來是因為記錄不存在的原因。

在上述的例子中，我們使用了findAll()方法和findRecord()方法，還有兩個方法與這兩個方法是類似的，分別是peekRecord()和peekAll()方法。這兩個方法的不同之處是不會發(fā)送請求，他們只會在本地緩存中獲取數(shù)據(jù)。

下面分別修改articles.js和article.js這兩個路由。使用peekRecord()和peekAll()方法測試效果。

//  app/routes/articles.js


import Ember from 'ember';


export default Ember.Route.extend({
    model: function() {
        //  返回firebase數(shù)據(jù)庫中的所有article
        // return this.store.findAll('article');

        
        return this.store.peekAll('article');
    }
});

由于沒有發(fā)送請求，我也沒有把數(shù)據(jù)存儲到本地，所以這個調(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)存儲到Store中，所以可以用peekRecord()方法獲取到數(shù)據(jù)。 但是在模型簡介這篇文章介紹過Store的特性，當(dāng)界面獲取數(shù)據(jù)的時候首先會在Store中查詢數(shù)據(jù)是否存在，如果不存在在再發(fā)送請求獲取，所以感覺peekRecord()和findRecord()方法區(qū)別不是很大！

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

項目中經(jīng)常會遇到根據(jù)某個值查詢出一組匹配的數(shù)據(jù)。此時返回的數(shù)據(jù)就不是只有一條了，那么Ember有是怎么去實現(xiàn)的呢？

//  app/routes/articles.js


import Ember from 'ember';


export default Ember.Route.extend({
    model: function() {
        //  返回firebase數(shù)據(jù)庫中的所有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) {
            //  對匹配的數(shù)據(jù)做處理
            return item;
        });
    }
});

查詢category為Java的數(shù)據(jù)。如果你只想精確查詢到某一條數(shù)據(jù)可以使用queryRecord()方法。如下：

this.store.queryRecord('article', { filter: { id: ' -JzyT-VLEWdF6zY3CefO' } }).then(function(item) {
    //  對匹配的數(shù)據(jù)做處理
});

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

博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大?。绻阌X得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力??！