Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Search query example bin for emberjs website" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
</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>
  
​
 
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({
  
  queryParams: {
    query: {
      // Opt into full transition
      refreshModel: true
    }
  },
  
  model: function(params) {
    if (!params.query) {
      return []; // no results;
    }
    
    var regex = new RegExp(params.query);
    return words.filter(function(word) {
      return regex.exec(word);
    });
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
billybonkspro
0viewers