博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ember.js 入门指南——查询记录
阅读量:6982 次
发布时间:2019-06-27

本文共 4211 字,大约阅读时间需要 14 分钟。

hot3.png

store提供了统一的获取数据的接口。包括创建新记录、修改记录、删除记录等,更多有关Store API请看这个网址的介绍:

 

为了演示这些方法的使用我们结合,关于firebaseEmber的整合前面的文章已经介绍,就不过多介绍了。

做好准备工作:

ember g route articlesember g route articles/article

 

1,查询方法findAllfindRecordpeekAllpeekRecord

 

首先配置route,修改子路由增加一个动态段article_id

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

 

下面是route代码,这段代码直接调用Storefind方法,返回所有数据。

//  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

 
       
              
                     
                         {
    {#each model as |item|}}                            
  •                                    
                      {
    {#link-to 'articles.article' item.id}}                                          {
    {item.title}}                                   {
    {/link-to}}                            
  •                      {
    {/each}}                     
              
               
              {
{outlet}}              
       

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

20012029_00Si.png

但是右侧是空白的,下面点击任何一条数据,可以看到右侧什么都不显示!

下面在子模板中增加显示数据的代码:

 

{
{model.title}}

{
{model.body}}

在点击左侧的数据,右侧可以显示对应的数据了!但是这个怎么就显示出来了呢??其实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为这个值的数据。此时控制台会出现下面的错误信息,从错误信息可以看出来是因为记录不存在的原因。

20012029_G4Il.png

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

 

       下面分别修改articles.jsarticle.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;              });       }});

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

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

 

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

转载于:https://my.oschina.net/ubuntuvim/blog/519119

你可能感兴趣的文章
我的友情链接
查看>>
洛谷——P1403 [AHOI2005]约数研究
查看>>
为什么硬盘只能有四个主分区
查看>>
IT十八掌掌第二天课程总结
查看>>
职业SNS天际网:透视“屌丝文化” 解析当今职场
查看>>
Leetcode 29. Divide Two Integers
查看>>
Kubernetes 1.5集成heapster
查看>>
清华赵骥主任与CIO石海军研讨互联网信息化
查看>>
tnsname.ora文件解析
查看>>
论文:论项目的计划和监控
查看>>
linux启动引导过程 grub和mbr
查看>>
lnmp环境安装
查看>>
Codeforces Round #438 868A/B/C
查看>>
每天一个linux命令(4):mkdir命令
查看>>
课后作业4之个人总结
查看>>
php常用的系统函数大全
查看>>
Jade To Pug过程中的一个小问题
查看>>
在ubuntu中搜索文件或文件夹的方法
查看>>
ioc——实现原理
查看>>
腾讯hr面
查看>>