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文档学习。