Skip to content

Instantly share code, notes, and snippets.

@herzzanu
Created March 25, 2016 18:23
Show Gist options
  • Save herzzanu/7c5d2cb920e7061acc13 to your computer and use it in GitHub Desktop.
Save herzzanu/7c5d2cb920e7061acc13 to your computer and use it in GitHub Desktop.
Query Params
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams: ['search', 'favourite'],
search: "",
favourite: false,
filteredUsers: Ember.computed('model', 'search', function() {
var search = this.get('search').toLowerCase();
return this.get('model').filter(function(user){
return user.firstName.toLowerCase().indexOf(search) !== -1;
});
}),
favouriteUsers: Ember.computed('filteredUsers', 'favourite', function() {
var favourite = this.get('favourite');
if (favourite) {
return this.get('filteredUsers').filter(function(user) {
return user.isFavourite;
});
} else {
return this.get('filteredUsers');
}
})
});
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
favourite: {
refreshModel: true
},
search: {
refreshModel: true
}
},
model: function() {
return [{
firstName: 'John',
lastName: 'Doe',
role: 'admin',
isFavourite: true,
isActive: false,
}, {
firstName: 'Tom',
lastName: 'Dunn',
role: 'guest',
isFavourite: false,
isActive: false,
}, {
firstName: 'Jack',
lastName: 'Meyers',
role: 'guest',
isFavourite: true,
isActive: true,
}];
}
});
<div>
{{input type="checkbox" checked=favourite}} Show Only Favourite
</div>
{{input type="text" placeholder="Search by name" value=search class="form-control"}}
<ul>
{{#each favouriteUsers as |user|}}
<li>{{user.firstName}}
<ul>
<li>Is Favourite: {{user.isFavourite}}</li>
<li>Is Active: {{user.isActive}}</li>
</ul>
</li>
{{/each}}
</ul>
{{outlet}}
{
"version": "0.7.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment