Permalink
Browse files

step-3 interactive search

  • Loading branch information...
204NoContent committed Apr 9, 2014
1 parent 6d6b8e2 commit 47f26c7334f28f0182f20bd5ea65c1cd99b3d6d6
@@ -1,3 +1,10 @@
PhonesCollection = Backbone.Collection.extend({
model: Phone
model: Phone,
query: function (query) {
if (!query || query === '') return this.models;
return this.filter(function (phone) {
return phone.values().join().match(new RegExp(query, 'i'));
});
}
});
@@ -1,8 +1,15 @@
window.JST = {};
window.JST["phones/filter"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='Search: \n<input class=\'query\'>\n';
}
return __p;
};
window.JST["phones/index"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<ul class=\'phones\'></ul>\n';
__p+='<div class=\'container-fluid\'>\n <div class=\'row-fluid\'>\n <div class=\'span2 filter\'>\n </div>\n <div class=\'span10\'>\n <ul class=\'phones\'></ul>\n </div>\n </div>\n</div>';
}
return __p;
};
@@ -0,0 +1 @@
Filter = Backbone.Model;
@@ -0,0 +1,2 @@
Search:
<input class='query'>
@@ -1 +1,9 @@
<ul class='phones'></ul>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span2 filter'>
</div>
<div class='span10'>
<ul class='phones'></ul>
</div>
</div>
</div>
@@ -0,0 +1,21 @@
PhonesFilterView = Backbone.View.extend({
events: {
'keydown input.query': 'setQuery',
},
initialize: function () {
this.render();
},
render: function () {
this.$el.html(JST['phones/filter']());
},
setQuery: function (event) {
// make it snappy by using keydown and pushing it to next tick
window.setTimeout($.proxy(function() {
this.model.set('query', event.target.value.replace(/^\s+|\s+$/g, ''));
}, this), 0);
}
});
@@ -1,6 +1,7 @@
PhonesIndexListPhoneView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model, 'remove', this.remove);
this.render();
},
@@ -1,18 +1,30 @@
PhonesIndexListView = Backbone.View.extend({
initialize: function () {
this.filtered_collection = new PhonesCollection();
this.listenTo(this.filtered_collection, 'add', this.renderPhone);
this.render();
this.listenTo(this.model, 'change:query', this.render);
},
render: function () {
this.$el.html('');
this.collection.each(this.renderPhone, this);
var filtered_phones = this.collection.query(this.model.get('query'));
this.filtered_collection.set(filtered_phones);
},
renderPhone: function (phone) {
this.$el.append(new PhonesIndexListPhoneView({
var position = this.filtered_collection.indexOf(phone);
this.phoneView = new PhonesIndexListPhoneView({
tagName: 'li',
model: phone
}).el);
});
if (position === 0) {
this.$el.prepend(this.phoneView.el);
} else {
$(this.$('li')[position - 1]).after(this.phoneView.el);
}
}
});
@@ -1,6 +1,7 @@
PhonesIndexView = Backbone.View.extend({
initialize: function () {
this.filter = new Filter();
this.collection = new PhonesCollection([
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
@@ -12,8 +13,15 @@ PhonesIndexView = Backbone.View.extend({
this.render();
new PhonesFilterView({
el: this.$('.filter'),
model: this.filter,
collection: this.collection
});
new PhonesIndexListView({
el: this.$('ul.phones'),
model: this.filter,
collection: this.collection
});
},
View
@@ -13,10 +13,12 @@
<script src="/javascripts/jst.js"></script>
<script src="/javascripts/models/phone.js"></script>
<script src="/javascripts/models/filter.js"></script>
<script src="/javascripts/collections/phones_collection.js"></script>
<script src="/javascripts/views/phones/index_view.js"></script>
<script src="/javascripts/views/phones/filter_view.js"></script>
<script src="/javascripts/views/phones/index_list_view.js"></script>
<script src="/javascripts/views/phones/index_list_phone_view.js"></script>

0 comments on commit 47f26c7

Please sign in to comment.