码迷,mamicode.com
首页 > Web开发 > 详细

Emberjs搜索

时间:2015-08-05 10:11:59      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

  <script>
    ENV = { ENABLE_ALL_FEATURES: true };
  </script>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
    <script src="http://s3.amazonaws.com/machty/to_s3_uploads/ember-4546b9a2-011e-3510-c13f-a3fbe024bec5.js"></script>


</head>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h3>Ember Query Params: search</h3>
    <form {{action "search" on="submit"}}>
      {{input value=queryField}}
      <input type="submit" value="Search"/>
    </form>
    
    {{#if query}}
      <p>Displaying results for "{{query}}"</p>
      
      <ul>
        {{#each}}
          <li>{{this}}</li>
        {{/each}}     
      </ul>
    {{/if}}
  </script>
</body>
</html>
  

 

 

js:

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  queryParams: [‘query‘],
  query: null,
  
  queryField: Ember.computed.oneWay(‘query‘),
  actions: {
    search: function() {
      this.set(‘query‘, this.get(‘queryField‘));
    }
  }
});


var words = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab illum labore quis ipsam voluptate sunt reprehenderit iure nisi sit ut inventore illo porro. Eveniet odio sed corporis distinctio tempore temporibus!".toLowerCase().split(‘ ‘);
App.ApplicationRoute = Ember.Route.extend({
  model: function(params) {
    if (!params.query) {
      return []; // no results;
    }
    
    var regex = new RegExp(params.query);
    return words.filter(function(word) {
      return regex.exec(word);
    });
  },
  actions: {
    queryParamsDidChange: function() {
      // opt into full refresh
      this.refresh();
    }
  }
});

 jsbin源码

Emberjs搜索

标签:

原文地址:http://www.cnblogs.com/xjinza/p/4703779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!