Skip to content

Instantly share code, notes, and snippets.

@willmanduffy
Last active March 15, 2016 14:56
Show Gist options
  • Select an option

  • Save willmanduffy/a250757335efad84e62d to your computer and use it in GitHub Desktop.

Select an option

Save willmanduffy/a250757335efad84e62d to your computer and use it in GitHub Desktop.
Ember Search
// app/controllers/resource/index.js
import Ember from 'ember';
// The resource in the file path here is just whatever you are searching. In this app, it's emoji
// but I wanted to standardize a bit. Here we are just defining the search query as a query param on
// line 9 and then, when the search action is triggered by the form we set the query param on the
// current route.
export default Ember.Controller.extend({
queryParams: ['query'],
actions: {
search: function() {
this.transitionToRoute({
queryParams: {
query: this.get('query')
}
});
}
}
});
<!-- app/templates/resource/index.hbs -->
<!--
The value line is a bit dangerous here as it causes the query param to change as you type.
I'd recommend debouncing if you keep it in.
-->
<form {{action 'search' on='submit'}}>
{{
input
type='search'
value=query
placeholder='Search time!'
}}
</form>
// app/routes/resource/index.js
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
query: {
refreshModel: true // This line is important so that when the query param is changed we call the server to get new data
}
},
model: function() {
var params = this.paramsFor('resources.index');
return this.store.query('resource', {
query: params.query
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment