Ember.js 入門指南——查詢記錄

store提供了統一的獲取數據的接口。包括建立新記錄、修改記錄、刪除記錄等，更多有關Store API請看這個網址的介紹：http://devdocs.io/ember/data/classes/ds.store。

 

爲了演示這些方法的使用咱們結合firebase，關於firebase與Ember的整合前面的文章已經介紹，就不過多介紹了。

作好準備工做：

ember g route articles
ember g route articles/article

 

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

 

首先配置route，修改子路由增長一個動態段article_id。

//  app/router.js
 
//  其餘代碼略寫，
 
Router.map(function() {
  this.route('store-example');
  this.route('articles', function() {
    this.route('article', { path: '/:article_id' });
  });
});

 

下面是route代碼，這段代碼直接調用Store的find方法，返回全部數據。

//  app/routes/articles.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              //  返回firebase數據庫中的全部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");

重啓項目使其生效。

       下面是顯示數據的模板articles.hbs。

<!--  app/templates/articles.hbs  -->
 
<div>
       <div>
              <div class="col-md-4 col-xs-4">
                     <ul>
                     {{#each model as |item|}}
                            <li>
                                   <!--設置路由，路由的層級與router.js裏定義的要一致，model的id屬性做爲參數 -->
                  {{#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/。稍等就能夠看到顯示的數據了，等待時間與你的網速有關。畢竟firebase不是在國內的！！！若是程序代碼沒有寫錯那麼你會看到以下圖的結果：

可是右側是空白的，下面點擊任何一條數據，能夠看到右側什麼都不顯示！

下面在子模板中增長顯示數據的代碼：

<!--  app/templates/articles/article.hbs  -->
 
<h1>{{model.title}}</h1>
<div>
{{model.body}}
</div>

在點擊左側的數據，右側能夠顯示對應的數據了！可是這個怎麼就顯示出來了呢？？其實Ember自動根據動態段過濾了，固然你也能夠顯示使用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);
       }
});

       此時獲得的結果與不調用findRecord方法是一致的。爲了驗證是否是執行了這個方法，咱們把動態段params.article_id的值改爲一個不存在的值’ ubuntuvim’，能夠確保的是在個人firebase數據中不存在id爲這個值的數據。此時控制檯會出現下面的錯誤信息，從錯誤信息能夠看出來是由於記錄不存在的緣由。

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

 

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

//  app/routes/articles.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              //  返回firebase數據庫中的全部article
              // return this.store.findAll('article');
             
              return this.store.peekAll('article');
       }
});

       因爲沒有發送請求，我也沒有把數據存儲到本地，因此這個調用什麼數據都沒有。

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

       因爲在父route中調用findAll獲取到數據並已經存儲到Store中，因此能夠用peekRecord()方法獲取到數據。

       可是在model簡介這篇文章介紹過Store的特性，當界面獲取數據的時候首先會在Store中查詢數據是否存在，若是不存在在再發送請求獲取，因此感受peekRecord()和findRecord()方法區別不是很大！

 

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

       項目中常常會遇到根據某個值查詢出一組匹配的數據。此時返回的數據就不是隻有一條了，那麼Ember有是怎麼去實現的呢？

//  app/routes/articles.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              //  返回firebase數據庫中的全部article
              // return this.store.findAll('article');
             
              // return this.store.peekAll('article');
      
              //  使用query方法查詢category爲Java的數據
              return this.store.query('article', { filter: { category: 'java' } }).then(function(item) {
                     //  對匹配的數據作處理
                     return item;
              });
       }
});

       查詢category爲Java的數據。若是你只想精確查詢到某一條數據可使用queryRecord()方法。以下：

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

 

       到此，經常使用的方法介紹完畢，但願經過介紹上述幾個方法起到拋磚引玉的效果，有關於DS.Store類的還有不少不少的方法，使用方式都是相似的，更多方法請本身看API文檔學習。