当前位置: 首页 > 编程日记 > 正文

Ember.js 入门指南——查询记录

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

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

做好准备工作:

ember g route articles
ember 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.jsimport Ember from 'ember';export default Ember.Route.extend({model: function() {//  返回firebase数据库中的所有articlereturn 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不是在国内的!!!如果程序代码没有写错那么你会看到如下图的结果:

20012029_00Si.png

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

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

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

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

//  app/routes/articles/article.jsimport 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.jsimport 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.jsimport 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.jsimport 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类的还有很多很多的方法,使用方式都是类似的,更多方法请自己看API文档学习。


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

相关文章:

C# 视频监控系列(9):服务器端——数据捕获(抓图 + 录像)

前言 录像功能是监控系统中最重要的功能之一&#xff0c;除了本文的功能实现外&#xff0c;还需要你自己考虑合适的存储策略&#xff1a;存储大小、时间段、存储盘符等。 注意 本系列文章限于学习交流&#xff0c;注重过程&#xff0c;由于涉及公司&#xff0c;所以不提供源代码…

疫情当下,你是在家里躺着刷抖音?还是在做这些?

2020年本来可以是很开心的一年没想到一开头就给了我们一个重重的一击疫情的出现让我们非常的恐慌新型病毒肺炎让我们无处可躲原来热闹的新年因为疫情让我们逼不得已只能待在家里走亲访友更是不可能的就连原来约好的相亲也泡汤了因为封城、封村、封小区、封路了而这些也只是为了…

代码打补丁的利器——diff和patch

一般来说&#xff0c;如果我们在研发过程中需要对代码进行修改&#xff0c;是不需要通过打补丁的方式的&#xff0c;因为我们可以直接改动文件即可。但是如果针对一款要上线的产品&#xff0c;我们总不能在研发的电脑上编译通过后直接发布到线上的。&#xff08;转载请指明出于…

React Namespaced Components

2019独角兽企业重金招聘Python工程师标准>>> var MyForm React.createClass({...}); var MyForm.Row React.createClass({...}); var MyForm.Label React.createClass({...}); var MyForm.Input React.createClass({...}); This feature is available in v0.11 …

Linux下HOOK动态链接库中API的方法

2012年&#xff0c;我写了一篇介绍Windows系统下Ring3层API的hook方案——《一种注册表沙箱的思路、实现——Hook Nt函数》&#xff0c;其在底层使用了微软的Detours库。5年后&#xff0c;我又遇到这么一个问题&#xff0c;但是系统变成了Linux。我最开始的想法是找一个Linux下…

NAT的配置与相关概念的理解

试验背景&#xff1a;随着接入因特网的计算机数量不断猛增&#xff0c;IPv4版本地址资源也就愈加显得捉襟见肘。好多企业申请的IP地址都是经过子网不断划分得到的。A类&#xff0c;B类地址基本已用完&#xff0c;而一般的用户根本就申请不到整段的公网C类地址。如果&#xff0c…

AAAI 2020论文解读:商汤科技发布新视频语义分割和光流联合学习算法

来源 | Every Frame Counts: Joint Learning of Video Segmentation and Optical Flow编辑 | Carol出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09; 商汤科技研究团队发表论文《Every Frame Counts: Joint Learning of VideoSegmentation and Optical Flo…

互联网+和创业潮,互联网+前提条件是什么?互联网+做什么?

在大众创业&#xff0c;万众创新的大浪下&#xff0c;凭着对新技术的敏感和青春激情&#xff0c;创业新军不断涌现.... 互联网创业浪潮, 如雨后春笋......,互联网渗透每个人的心中。创业不是赶时髦&#xff0c;而是一条非常孤独&#xff0c;艰难的路。实施“互联网&#xff0b;…

C++拾趣——C++11的语法糖auto

C是一种强类型的语言&#xff0c;比如变量a&#xff0c;如果声明它是整型&#xff0c;则之后只能将它作为整型来用。这和其他弱类型的语言有很大的区别&#xff0c;比如python中&#xff0c;我们可以让a在第一行是个整型&#xff0c;第三行是一个字符串。&#xff08;转载请指明…

“数学不行,啥都干不好!”骨灰级程序员:这比努力重要1000倍

之前有很多程序员读者向我们抱怨&#xff1a;1&#xff09;做算法优化时&#xff0c;只能现搬书里的算法&#xff0c;遇到不一样的问题&#xff0c;就不会了。2&#xff09;面试一旦涉及到算法和数据结构&#xff0c;如果数学不行&#xff0c;面试基本就凉凉了。3&#xff09;一…

跳槽 你准备好了吗

“人往高处走”&#xff0c;这固然没有错。但是&#xff0c;说来轻巧的一句话&#xff0c;它却包含了为什么“走”、什么是“高”、怎么“走”、什么时候“走”&#xff0c;以及“走”了以后怎么办等一系列问题。跳槽是一门学问&#xff0c;也是一种策略。“人往高处走”&#…

C++:常类型Const

常类型&#xff1a;使用类型修饰符const说明的类型&#xff0c;常类型的变量或对象成员的值在程序运行期间是不可改变的。 3.10.1 常引用 如果在说明引用时用const修饰&#xff0c;则被说明的引用为常引用。如果用常引用做形参&#xff0c;便不会产生对实参 的不希望的更改。常…

JQuery制作的toolTip,针对图片预览效果

昨天做了一个文字版的toolTip&#xff0c;后来想想现在大家都爱看图&#xff0c;文字未免有点单调了点&#xff0c;那我们就来个图片式的预览。代码比较简单&#xff0c;我就不多说了。 欢迎来到 买礼网 选购礼品&#xff01; 畅游鄂西山水风光尽在 恩施旅游资讯网首先看看调用…

29篇计算机视觉领域论文,篇篇惊艳!内附链接!

作者 | 微软亚洲研究院本文经授权转载自微软研究院AI头条&#xff08;ID&#xff1a;MSRAsia&#xff09;1. Deep High-Resolution Representation Learning for Human Pose Estimation论文链接&#xff1a;https://arxiv.org/pdf/1902.09212.pdf该论文在提出了一个新的网络Hig…

绑定CPU逻辑核心的利器——taskset

在工作中&#xff0c;我们可能遇到这样的需求&#xff1a;如何评估程序在一核和多核下的工作效率差距&#xff1f;最简单的想法是找一台只有一个CPU逻辑核的机器和一台有多个逻辑核的机器。&#xff08;转载请指明出于breaksoftware的csdn博客&#xff09;但是这种方式有明显的…

IDE set arguments

2019独角兽企业重金招聘Python工程师标准>>> code::blocks -> Project -->set programs arguments qtcreater -> Projects --> Build&Run --> Run --> Arguments xcode -> super < -->build-->arguments 转载于:https://my.osch…

2020年AI如何走?Jeff Dean和其他四位“大神”已做预测!

作者 | Khari Johnson译者 | 王艳妮 责编 | 胡巍巍出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;人工智能已经不再是随时准备改变世界的状态&#xff0c;而是已经在改变世界。在迈入2020年这新的一年、以及新的20年代之际&#xff0c;笔者请到了AI方面最…

zookeeper快速入门——简介

在几十年前&#xff0c;一个独立的计算机上往往部署着一套完整的应用系统。当时因为网络稳定性及速度的限制&#xff0c;将相关联的服务部署在一台机器上&#xff0c;让它们使用系统机制通信——比如管道&#xff0c;文件等&#xff0c;往往是最稳定和最高效的。然而随着网络技…

为TextMate扩展全屏功能

今天看代码&#xff0c;感觉TextMate那个窗口太小了点&#xff0c;越看越不爽&#xff0c;就想把它弄成全屏的。于是搜索啊搜索啊搜索&#xff0c;终于让我找到一款很yd的小软件&#xff0c;叫megazoomer&#xff0c; 下载地址是&#xff1a;[url]http://ianhenderson.org/mega…

hdu1406

一道很水很水的题&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;#include<iostream> using namespace std; int main(){int num1,num2,i,k,j,sum,n;while(cin>>n){ while(n--){cin&g…

zookeeper快速入门——部署

zookeeper有两种运行模式&#xff1a;独立模式和仲裁模式。独立模式就是只运行一个Zookeeper Server&#xff0c;这自然没法解决服务崩溃导致系统不可用的问题。仲裁模式就是以集群的方式运行Zookeeper Server&#xff0c;这样在Leader不可用时&#xff0c;集群内部会发起选举&…

2020,人工智能和深度学习未来的五大趋势

来源 | forbes编译 | Shawn编辑 | Carol出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;虽然近年来人工智能经常成为热门议题&#xff0c;但它还远未实现真正的成就。人工智能技术发展的主要障碍在于投资成本&#xff0c;投资成本影响短期内的回报。而当时…

电脑常见故障 1

死机恐怕是所有电脑故障里面最常见的一种了&#xff0c;但是死机的原因是多种多样的。 如果从硬件入手&#xff0c;先是看看机箱里的温度是否很高&#xff0c;要检查CPU的风扇是否正常运转&#xff0c;并要注意电脑的散热问题&#xff1b;其次可检查内存&#xff0c;检查完内存…

linux常用命令-date-clock-hwclock-type-whois--help-man-info-cal

date&#xff1a;时间管理电子表&#xff1a;晶体震荡器 石英震荡器Linux&#xff1a;rtc 硬件时间NTP&#xff1a;网络时间协义硬件时间&#xff08;命令&#xff1a;clock&#xff09;系统时间&#xff08;命令&#xff1a;date&#xff09;type COMMAND 判断命令是内部命令…

内存、性能问题分析的利器——valgraind

valgrind是一个知名的分析软件集。我们可以使用它进行内存、多线程及性能等各种问题的分析。它采用非侵入方式&#xff0c;所谓非侵入方式是指&#xff1a;我们不用在代码中插入分析工具的库。这对于开发者来说是友好的。因为如果要将工具编译到文件中&#xff0c;或者要调用其…

这是我见过最卡通的 Python 算法了,通俗易懂

普通程序员&#xff0c;不学算法&#xff0c;也可以成为大神吗&#xff1f;对不起&#xff0c;这个&#xff0c;绝对不可以。可是算法好难啊~~看两页书就想睡觉……所以就不学了吗&#xff1f;就一直当普通程序员吗&#xff1f;如果有一本算法书&#xff0c;看着很轻松……又有…

WebService(Axis2)视频教程与QQ交流群发布

Axis2是目前比较流行的WebService引擎。WebService被应用在很多不同的场景。例如&#xff0c;可以使用WebService来发布服务端 Java类的方法&#xff0c;以便使用不同的客户端进行调用。这样可以有效地集成多种不同的技术来完成应用系统。WebService还经常被使用在SOA中&#x…

fragment类onresume里面刷新操作处理

今天项目中涉及fragment中嵌套多个fragment&#xff0c;但是要根据tag去展示对应的fragment&#xff0c;而不是默认展示的第一个fragment&#xff0c;如果使用activity很容易想到onpause(),onResume()中进行处理&#xff0c;但是你会发现fragment的onpause和onresume只调用一次…

内存问题分析的利器——valgrind的memcheck

在《内存、性能问题分析的利器——valgrind》一文中我们简单介绍了下valgrind工具集&#xff0c;本文将使用memcheck工具分析各种内存问题。&#xff08;转载请指明出于breaksoftware的csdn博客&#xff09; 本文所有的代码都是使用g -O0 -g mem_error.c -o mem_erro编译&#…

类项目中的配置文件app.config在打包安装后的信息获取的问题

在一个项目中碰到这样的一个问题&#xff0c;做一个WORD插件&#xff0c;功能在类库项目中实现了&#xff0c;配置信息存在类库项目的配置文件app.config中&#xff0c;在进行打包后&#xff0c;获取的配置文件中的DocType节点信息时&#xff0c;使用以下方法 ConfigurationMa…