Skip to content

Instantly share code, notes, and snippets.

@beames

beames/index.html

Created August 22, 2014 13:12
Show Gist options
  • Save beames/673ed03490055e279ead to your computer and use it in GitHub Desktop.
Save beames/673ed03490055e279ead to your computer and use it in GitHub Desktop.
Download ZIP
Ember filterBy // source http://jsbin.com/xafac/1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember filterBy" />
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
<span>Filter: </span>{{view Ember.TextField valueBinding=filter}}
<ul>
{{#each item in filteredContent}}
<li>{{item.name}}</li>
{{/each}}
</ul>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', [
Ember.Object.create({name: 'Joe'}),
Ember.Object.create({name: 'Frank'}),
Ember.Object.create({name: 'John'}),
Ember.Object.create({name: 'Billy'}),
Ember.Object.create({name: 'John'}),
Ember.Object.create({name: 'Johnny'})
]);
}
});
App.IndexController = Ember.ArrayController.extend({
content: [],
filter: "",
filteredContent: function() {
var filter = this.get('filter');
return this.get('content').filter(function(item, index, enumerable){
return item.get('name').toLowerCase().match(filter.toLowerCase());
});
}.property('filter', 'content.@each')
});
</script>
</body>
</html>
Raw
jsbin.xafac.js
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', [
Ember.Object.create({name: 'Joe'}),
Ember.Object.create({name: 'Frank'}),
Ember.Object.create({name: 'John'}),
Ember.Object.create({name: 'Billy'}),
Ember.Object.create({name: 'John'}),
Ember.Object.create({name: 'Johnny'})
]);
}
});
App.IndexController = Ember.ArrayController.extend({
content: [],
filter: "",
filteredContent: function() {
var filter = this.get('filter');
return this.get('content').filter(function(item, index, enumerable){
return item.get('name').toLowerCase().match(filter.toLowerCase());
});
}.property('filter', 'content.@each')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment