Permalink
Browse files

step-2 backbone models and collections

  • Loading branch information...
204NoContent committed Apr 9, 2014
1 parent 24ec7c3 commit 6d6b8e26617b9aaf14e8fc136b64f08743b6caa6
@@ -0,0 +1,3 @@
PhonesCollection = Backbone.Collection.extend({
model: Phone
});
View
@@ -2,7 +2,18 @@ window.JST = {};
window.JST["phones/index"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<ul>\n <li>\n <span>Nexus S</span>\n <p>\n Fast just got faster with Nexus S.\n </p>\n </li>\n <li>\n <span>Motorola XOOM™ with Wi-Fi</span>\n <p>\n The Next, Next Generation tablet.\n </p>\n </li>\n</ul>';
__p+='<ul class=\'phones\'></ul>\n';
}
return __p;
};
window.JST["phones/index_list_phone"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+=''+
((__t=( get('name') ))==null?'':_.escape(__t))+
'\n<p>'+
((__t=( get('snippet') ))==null?'':_.escape(__t))+
'</p>\n';
}
return __p;
};
@@ -0,0 +1 @@
Phone = Backbone.Model;
@@ -1,14 +1 @@
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM™ with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
<ul class='phones'></ul>
@@ -0,0 +1,2 @@
[[= get('name') ]]
<p>[[= get('snippet') ]]</p>
@@ -0,0 +1,10 @@
PhonesIndexListPhoneView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
this.$el.html(JST['phones/index_list_phone'](this.model));
}
});
@@ -0,0 +1,18 @@
PhonesIndexListView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
this.$el.html('');
this.collection.each(this.renderPhone, this);
},
renderPhone: function (phone) {
this.$el.append(new PhonesIndexListPhoneView({
tagName: 'li',
model: phone
}).el);
}
});
@@ -1,7 +1,21 @@
PhonesIndexView = Backbone.View.extend({
initialize: function () {
this.collection = new PhonesCollection([
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
]);
this.render();
new PhonesIndexListView({
el: this.$('ul.phones'),
collection: this.collection
});
},
render: function () {
View
@@ -12,7 +12,13 @@
<script src="/javascripts/lib/backbone.js"></script>
<script src="/javascripts/jst.js"></script>
<script src="/javascripts/models/phone.js"></script>
<script src="/javascripts/collections/phones_collection.js"></script>
<script src="/javascripts/views/phones/index_view.js"></script>
<script src="/javascripts/views/phones/index_list_view.js"></script>
<script src="/javascripts/views/phones/index_list_phone_view.js"></script>
<script src="/javascripts/router.js"></script>
<script src="/javascripts/init.js"></script>

0 comments on commit 6d6b8e2

Please sign in to comment.