首页 > Web开发 > 详细

Emberjs搜索

时间:2015-08-05 10:10:04      阅读:155      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!