文章来源：

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

新建Ember项目

  执行使用命令创建。

ember new searchcd searchember server

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

下面创建测试用的文件

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

ember g route postember g controller postsember 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， 在路由post的model回调中增加测试数据。

//  app/routes/posts.jsimport 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增加测试数据后，我直接在模板中遍历显示这些数据，此时仅仅是显示，还没增加查询功能。

    
    
     	{
   {#each model as |item|}}		
     
{
   {item.title}}
	{
   {/each}}
    

页面显示效果如下图：

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

//  app/controllers/posts.jsimport 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;      }    })    });

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

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

    {
   {input type="text" value=queryValue placeholder="search..."}}
    
    
	
     	{
   {#each posts as |item|}}		
     
{
   {item.title}}
	{
   {/each}}
    

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

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

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

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

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

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