<!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(); } } });