JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/gist/2917574/f21f5cc2cd7899b4fc1969d0eecdb3b002249e98/ember.js"></script>
JavaScript
//TODO: Reusable filter collection view
Components.FilteredList = Em.ContainerView.extend({
classNames: ["filtered-list"],
searchText: '',
searchResults: null,
filterProperty: "name",
didInsertElement : function() {
this._super();
// Initialize results to everything.
this.doSearch();
Ember.assert("listItemTemplate must be defined", this.listItemTemplate !== null);
},
listItemTemplate: Em.View.extend({
template: Em.Handlebars.compile("gogogog")
}),
doSearch : function() {
var searchText = this.get('searchText');
var filterProperty = this.get("filterProperty");
var content = this.get("controller").get("content");
if (content && content.length > 0) {
var searchResults = this.get("controller").get("content").filter(function(item) {
return !!item.getPath(filterProperty).match(new RegExp(searchText, 'i'));
}).sort(function(item1, item2) {
return Ember.compare(item1.getPath(filterProperty), item2.getPath(filterProperty));
});
this.set('searchResults', searchResults);
}
}.observes('searchText', 'controller.content'),
childViews: [
Em.TextField.extend({
placeholder: "Filter list",
valueBinding: "parentView.searchText"
}),
Em.CollectionView.extend({
tagName: "ul",
classNames: ['unstyled', 'filtered-list'],
contentBinding: "parentView.searchResults",
listItemTemplateBinding: "parentView.listItemTemplate",
emptyView: Em.View.extend({
template: Em.Handlebars.compile("No Results Found.")
}),
itemViewClassBinding: "parentView.listItemTemplate"
})
]
...