Ember.js 属性值模糊查询

原创
2015/11/04 00:41
阅读数 216

文章来源: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则返回这条数据,否则直接从数组中过滤掉当期这条数据。

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

展开阅读全文
打赏
0
1 收藏
分享
加载中
ubuntuvim博主
route:posts还可以改进,缺了个图片!
2015/11/04 11:24
回复
举报
更多评论
打赏
1 评论
1 收藏
0
分享
返回顶部
顶部