文档章节

Ember.js 属性值模糊查询

ubuntuvim
 ubuntuvim
发布于 2015/11/04 00:41
字数 868
阅读 157
收藏 1

文章来源:http://blog.ddlisting.com/2015/11/09/ember-js-fuzzy-query-for-property/

  如果是SQL语句很容易实现模糊查询,但是在Ember的应用中怎么实现model属性的模糊查询呢。 说难也不难,说简单也简单。只要自定义filter方法即可实现。那么少废话放码出来吧!

新建Ember项目

  执行使用Ember CLI命令创建。

ember new search
cd search
ember server

  项目启动之后浏览:http://localhost:4200,可以看到Welcome to Ember,这个欢迎信息,说明项目创建成功。

下面创建测试用的文件

  仍然是使用Ember CLI命令创建。

ember g route post
ember g controller posts
ember g model post

  使用命令创建route的时候会自动也创建出对应的template文件。

1,定义model

import DS from 'ember-data';

export default DS.Model.extend({
	title: DS.attr('string')
	// body: DS.attr('string'),
	// timestamp: DS.attr('number')
});

2, 在路由postmodel回调中增加测试数据。

//  app/routes/posts.js

import Ember from 'ember';

export default Ember.Route.extend({

	model: function() {
		//  增加测试数据
		var todoItem = this.store.createRecord('post', 
			{ id: 1, title: 'hello world! ' }
		);
		todoItem.save();

		var todoItem2 = this.store.createRecord('post', 
			{ id: 3, title: '你好,大家好才是真的好' }
		);
		todoItem2.save();

		var todoItem3 = this.store.createRecord('post', 
			{ id: 4, title: 'http://www.ddlisting.com ' }
		);
		todoItem3.save();

		var todoItem4 = this.store.createRecord('post', 
			{ id: 5, title: '这个是包含有字母h的数据' }
		);
		todoItem4.save();

		var todoItem5 = this.store.createRecord('post', 
			{ id: 6, title: '有了天天列表,大事化小,小事化了。' }
		);
		todoItem5.save();

		return this.store.findAll('post');
	}

});

route增加测试数据后,我直接在模板中遍历显示这些数据,此时仅仅是显示,还没增加查询功能。

<!-- app/templates/posts.hbs -->
<ul>
	{{#each model as |item|}}
		<li>{{item.title}}</li>
	{{/each}}
</ul>

页面显示效果如下图:

图1-1

下面增加查询功能,首先在controller类中增加两个计算属性,一个用来接受查询参数,一个用户显示结果。


//  app/controllers/posts.js

import Ember from 'ember';

export default Ember.Controller.extend({
	//  定义查询属性 queryParams 是Ember固定属性,queryValue用于接受页面传过来的值
	queryParams: ['queryValue'],
    queryValue: '',

    //  此计算属性用于页面显示数据
    posts: Ember.computed('queryValue', 'model', function() {
      var queryValue = this.get('queryValue');
      var post = this.get('model');
      if (queryValue) {
          return post.filter(function(td) {
          	  //  通过判断包含的方式实现模糊查询效果
        	  return td.get('title').indexOf(queryValue) != -1;
          });
      } else {
          return post;
      }
    })
    
});

代码功能的解释看注释的内容。

然后修改显示数据模板文件,并增加一个查询输入框。

<!-- app/templates/posts.hbs -->
{{input type="text" value=queryValue placeholder="search..."}}
<br><hr>
<ul>
	<!-- 遍历posts,而不是model -->
	{{#each posts as |item|}}
		<li>{{item.title}}</li>
	{{/each}}
</ul>

此的界面显示效果如图1-2所示。

图1-2

当你在查询框输入要查询的内容时,显示的信息会根据的你输入的内容动态发生变化。 比如输入:h 那么界面显示的数据有:

hello world!
http://www.ddlisting.com
这个是包含有字母h的数据

这三条数据都是包含有h这个字母的,如果输入查询的内容是http那么结果就只剩下一条了。

最核心的代码是td.get('title').indexOf(queryValue) != -1这句,filter方法只会数组中匹配条件的数据,如果indexOf(queryValue) != -1返回true则返回这条数据,否则直接从数组中过滤掉当期这条数据。

不知道你是否看明白了,如有疑问欢迎给我留言。

© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
加载中

评论(1)

ubuntuvim
ubuntuvim 博主
route:posts还可以改进,缺了个图片!
Ember.js 入门指南——查询参数

查询参数是在URL的问号(?)右边部分,通常是键值对形式出现。 http://example.com/articles?sort=ASC&page=2 比如这个URL的查询参数有两个,一个是sort,一个是page,它们的值分别是ASC和2...

ubuntuvim
2015/09/30
389
0
Ember.js v2.12.0-beta.2 和 v2.11.1 发布

Ember.js v2.12.0-beta.2 和 v2.11.1 发布了,Ember.js 是一个用于创建 web 应用的 JavaScript MVC 框架,采用基于字符串的 Handlebars 模板,支持双向绑定、观察者模式、计算属性(依赖其他...

两味真火
2017/02/17
558
0
Ember.js 2.2/2.3 Beta 发布

Ember.js 2.2 是个小版本,只包括了性能改进和 bug 修复,包含了 60+ 贡献者的努力(Ember.js 2.2.0 更新日志)。同时发布了 Ember.js 2.3 beta,计划 6 周后发布稳定版本。 Ember.js 2.3 b...

oschina
2015/11/17
1K
0
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 1.10.0/1.11 Beta 发布

Ember是一个雄心勃勃的Web应用程序,消除了样板,并提供了一个标准的应用程序架构的JavaScript框架。 Ember.js 1.10.0/1.11 Beta 发布,Ember.js 1.10 版本包括至少 50 位贡献者,超过 553 ...

oschina
2015/02/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

安全组和云防火墙的区别

前言 熟悉云平台的朋友可能都会注意到这样一个事情:无论公有云还是私有云,创建虚拟机的时候都需要选择安全组,来对虚拟机进行安全防护;有的云平台在VPC里,还能选择防火墙,ZStack在3.6版...

ZStack社区版
15分钟前
1
0
教育性app开发的重要性和好处

在这个精通技术的世界中,流行的app主导着无聊的教育系统。当我们将技术和教育结合在一起时,它将带来当代以及强大的学习资源。因此,将教育移动app集成到您的学习过程中,并根据自己的信念把...

a429011717
16分钟前
1
0
IE6/7/8如何兼容CSS3属性

本文转载于:专业的前端网站➩IE6/7/8如何兼容CSS3属性 最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不...

前端老手
31分钟前
2
0
手把手教你ALLEGRO的约束规则的设置教程!

约束规则的设置 分三步, 定义规则(一、基本约束规则设置:1、线间距设置;2、线宽设置;3、设置过孔;4、区域约束规则设置;5、设置阻抗;6、设置走线的长度范围;7、设置等长:7.1、不过电阻的NET 等...

demyar
33分钟前
3
0
完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。 今天终于找到了滚动穿透的原因和完...

未来cc
37分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部