Skip to content

Instantly share code, notes, and snippets.

@aortbals

aortbals/jsbin.ember_array_controller_filter.html

Last active December 24, 2015 06:39
Show Gist options
  • Save aortbals/6758267 to your computer and use it in GitHub Desktop.
Save aortbals/6758267 to your computer and use it in GitHub Desktop.
Download ZIP
This example binds a text input to an Ember ArrayController, filtering the content as you type. http://jsbin.com/UvePomO/4/edit?html,js,output
Raw
jsbin.ember_array_controller_filter.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ArrayController Live Filtered Content" />
<meta charset=utf-8 />
<title>ArrayController Live Filtered Content</title>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{input valueBinding="query" placeholder="Filter"}}
{{#each filteredContent}}
<p>{{name}}</p>
{{/each}}
</script>
</body>
</html>
Raw
jsbin.jsbin.ember_array_controller_filter.js
var App = Ember.Application.create();
App.ApplicationController = Em.ArrayController.extend({
query: '',
content: [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' }
],
filteredContent: Ember.computed('content', function() {
var query = this.get('query');
var content = this.get('content');
if (!(query && query.trim()))
return content;
return content.filter(function(item, index, self) {
if(item.name.toLowerCase().indexOf(query.toLowerCase()) != -1)
return true;
});
}).property('query').cacheable()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment