Permalink
Browse files

step-4 phone ordering

  • Loading branch information...
204NoContent committed Apr 9, 2014
1 parent 47f26c7 commit 7446c0f559f0815f3dabc54bb01549d62276bb95
View
@@ -2,7 +2,17 @@ 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';
__p+='Search: \n<input class=\'query\'>\nSort by: \n<select class=\'sort\'>\n ';
_.each(order_options, function (option) {
__p+='\n <option value="'+
((__t=( option.value ))==null?'':_.escape(__t))+
'" '+
((__t=( option.selected ? 'selected': ''))==null?'':_.escape(__t))+
'>'+
((__t=( option.text ))==null?'':_.escape(__t))+
'</option>\n ';
})
__p+='\n</select>\n';
}
return __p;
};
@@ -1 +1,5 @@
Filter = Backbone.Model;
Filter = Backbone.Model.extend({
defaults: {
sortBy: 'age'
}
});
@@ -1,2 +1,8 @@
Search:
<input class='query'>
Sort by:
<select class='sort'>
[[ _.each(order_options, function (option) { ]]
<option value="[[= option.value ]]" [[= option.selected ? 'selected': '']]>[[= option.text ]]</option>
[[ }) ]]
</select>
@@ -2,20 +2,29 @@ PhonesFilterView = Backbone.View.extend({
events: {
'keydown input.query': 'setQuery',
'change select.sort': 'setSort'
},
initialize: function () {
this.render();
},
render: function () {
this.$el.html(JST['phones/filter']());
this.order_options = [{ value: 'name', text: 'Alphabetical'}, { value: 'age', text: 'Newest' }];
var selected_option = _.findWhere(this.order_options, { value: this.model.get('sortBy') }, this);
if (selected_option) selected_option.selected = true;
this.$el.html(JST['phones/filter']({ order_options: this.order_options }));
},
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);
},
setSort: function (event) {
this.model.set('sortBy', event.target.value);
}
});
@@ -6,11 +6,16 @@ PhonesIndexListView = Backbone.View.extend({
this.render();
this.listenTo(this.model, 'change:sortBy', this.rerender);
this.listenTo(this.model, 'change:query', this.render);
},
render: function () {
var filtered_phones = this.collection.query(this.model.get('query'));
filtered_phones = _.sortBy(filtered_phones, function (phone) {
var attr_value = phone.get(this.model.get('sortBy'));
return _.isString(attr_value) ? attr_value.toLowerCase() : attr_value;
}, this);
this.filtered_collection.set(filtered_phones);
},
@@ -26,5 +31,10 @@ PhonesIndexListView = Backbone.View.extend({
} else {
$(this.$('li')[position - 1]).after(this.phoneView.el);
}
},
rerender: function () {
this.filtered_collection.set();
this.render();
}
});
@@ -4,11 +4,14 @@ PhonesIndexView = Backbone.View.extend({
this.filter = new Filter();
this.collection = new PhonesCollection([
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
]);
this.render();

0 comments on commit 7446c0f

Please sign in to comment.