Ember 记录查询

2018-01-06 18:00 更新

store提供了统一的获取数据的接口。包括创建新记录、修改记录、删除记录等,更多有关Store API请点击网址看详细信息。

为了演示这些方法的使用我们结合firebase,关于firebase与Ember的整合前面的文章已经介绍,就不过多介绍了。 做好准备工作:

  1. ember g route articles
  2. ember g route articles/article

1,查询方法findAll,findRecord,peekAll,peekRecord

首先配置route,修改子路由增加一个动态段article_id,有关动态的介绍请看Dynamic Segments

  1. // app/router.js
  2. // 其他代码略写,
  3. Router.map(function() {
  4. this.route('store-example');
  5. this.route('articles', function() {
  6. this.route('article', { path: '/:article_id' });
  7. });
  8. });

下面是路由代码,这段代码直接调用Store的find方法,返回所有数据。

  1. // app/routes/articles.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. model: function() {
  5. // 返回firebase数据库中的所有article
  6. return this.store.findAll('article');
  7. }
  8. });

为了界面看起来舒服点我引入了bootstrap框架。引入的方式:bower install bootstrap安装插件。然后修改ember-cli-build.js,在return之前引入bootstrap:

  1. app.import("bower_components/bootstrap/dist/js/bootstrap.js");
  2. app.import("bower_components/bootstrap/dist/css/bootstrap.css");

重启项目使其生效。

下面是显示数据的模板articles.hbs

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-md-4 col-xs-4">
  4. <ul class="list-group">
  5. {{#each model as |item|}}
  6. <li class="list-group-item">
  7. {{#link-to 'articles.article' item.id}}
  8. {{item.title}}
  9. {{/link-to}}
  10. </li>
  11. {{/each}}
  12. </ul>
  13. </div>
  14. <div class="col-md-8 col-xs-8">
  15. {{outlet}}
  16. </div>
  17. </div>
  18. </div>

在浏览器运行:http://localhost:4200/articles/。稍等就可以看到显示的数据了,等待时间与你的网速有关。毕竟firebase不是在国内的!!!如果程序代码没有写错那么你会看到如下图的结果:

articles数据列表

但是右侧是空白的,下面点击任何一条数据,可以看到右侧什么都不显示! 下面在子模板中增加显示数据的代码:

  1. <h2>{{model.title}}</h2>
  2. <div class = "body">
  3. {{model.body}}
  4. </div>

在点击左侧的数据,右侧可以显示对应的数据了!但是这个怎么就显示出来了呢??其实Ember自动根据动态段过滤了,当然你也可以显示使用findRecord方法过滤。

  1. // app/routes/articles/article.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. model: function(params) {
  5. console.log('params = ' + params.article_id);
  6. // 'chendequanroob@gmail.com'
  7. return this.store.findRecord('article', params.article_id);
  8. }
  9. });

此时得到的结果与不调用findRecord方法是一致的。为了验证是不是执行了这个方法,我们把动态段params.article_id的值改成一个不存在的值’ ubuntuvim’,可以确保的是在我的firebase数据中不存在id为这个值的数据。此时控制台会出现下面的错误信息,从错误信息可以看出来是因为记录不存在的原因。

数据不存在错误

在上述的例子中,我们使用了findAll()方法和findRecord()方法,还有两个方法与这两个方法是类似的,分别是peekRecord()peekAll()方法。这两个方法的不同之处是不会发送请求,他们只会在本地缓存中获取数据。

下面分别修改articles.jsarticle.js这两个路由。使用peekRecord()peekAll()方法测试效果。

  1. // app/routes/articles.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. model: function() {
  5. // 返回firebase数据库中的所有article
  6. // return this.store.findAll('article');
  7. return this.store.peekAll('article');
  8. }
  9. });

由于没有发送请求,我也没有把数据存储到本地,所以这个调用什么数据都没有。

  1. // app/routes/articles/article.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. model: function(params) {
  5. // return this.store.findRecord('article', params.article_id);
  6. return this.store.peekRecord('article', params.article_id);
  7. }
  8. });

由于在父路由中调用findAll获取到数据并已经存储到Store中,所以可以用peekRecord()方法获取到数据。 但是在模型简介这篇文章介绍过Store的特性,当界面获取数据的时候首先会在Store中查询数据是否存在,如果不存在在再发送请求获取,所以感觉peekRecord()findRecord()方法区别不是很大!

2,查询多记录方法query()

项目中经常会遇到根据某个值查询出一组匹配的数据。此时返回的数据就不是只有一条了,那么Ember有是怎么去实现的呢?

  1. // app/routes/articles.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. model: function() {
  5. // 返回firebase数据库中的所有article
  6. // return this.store.findAll('article');
  7. // return this.store.peekAll('article');
  8. // 使用query方法查询category为Java的数据
  9. return this.store.query('article', { filter: { category: 'java' } }).then(function(item) {
  10. // 对匹配的数据做处理
  11. return item;
  12. });
  13. }
  14. });

查询categoryJava的数据。如果你只想精确查询到某一条数据可以使用queryRecord()方法。如下:

  1. this.store.queryRecord('article', { filter: { id: ' -JzyT-VLEWdF6zY3CefO' } }).then(function(item) {
  2. // 对匹配的数据做处理
  3. });

到此,常用的方法介绍完毕,希望通过介绍上述几个方法起到抛砖引玉的效果,有关于DS.Store类的还有很多很多的方法,使用方式都是类似的,更多方法请自己看API文档学习。

博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能有出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号