Skip to content
Permalink
Browse files

step-8 phone details view

  • Loading branch information...
204NoContent committed Apr 9, 2014
1 parent 7742e71 commit 6337327833a3bb715b468230a5037dfd170a32b2
@@ -0,0 +1,3 @@
PhotosCollection = Backbone.Collection.extend({
model: Photo
});
@@ -12,7 +12,7 @@ __p+='\n <option value="'+
((__t=( option.text ))==null?'':_.escape(__t))+
'</option>\n ';
})
__p+='\n</select>\n';
__p+='\n</select>';
}
return __p;
};
@@ -43,9 +43,92 @@ return __p;
window.JST["phones/show"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='TBD: detail view for '+
((__t=( get('id') ))==null?'':_.escape(__t))+
'\n';
__p+='<div class=\'phone-images\'></div>\n<h1>'+
((__t=( get('name') ))==null?'':_.escape(__t))+
'</h1>\n<p>'+
((__t=( get('description') ))==null?'':_.escape(__t))+
'</p>\n<ul class=\'phone-thumbs\'></ul>\n<ul class=\'specs\'></ul>';
}
return __p;
};
window.JST["phones/show_image"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<img src="'+
((__t=( '/' + get('path') ))==null?'':_.escape(__t))+
'" class=\'phone\'>';
}
return __p;
};
window.JST["phones/show_images_list_image"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<img src="'+
((__t=( '/' + get('path') ))==null?'':_.escape(__t))+
'">';
}
return __p;
};
window.JST["phones/show_specs"] = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<li>\n <span>Availability and Networks</span>\n <dl>\n <dt>Availability</dt>\n <dd>'+
((__t=( get('availability') ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Battery</span>\n <dl>\n <dt>Type</dt>\n <dd>'+
((__t=( get('battery').type ))==null?'':_.escape(__t))+
'</dd>\n <dt>Talk Time</dt>\n <dd>'+
((__t=( get('battery').talkTime ))==null?'':_.escape(__t))+
'</dd>\n <dt>Standby time (max)</dt>\n <dd>'+
((__t=( get('battery').standbyTime ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Storage and Memory</span>\n <dl>\n <dt>RAM</dt>\n <dd>'+
((__t=( get('storage').ram ))==null?'':_.escape(__t))+
'</dd>\n <dt>Internal Storage</dt>\n <dd>'+
((__t=( get('storage').flash ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Connectivity</span>\n <dl>\n <dt>Network Support</dt>\n <dd>'+
((__t=( get('connectivity').cell ))==null?'':_.escape(__t))+
'</dd>\n <dt>WiFi</dt>\n <dd>'+
((__t=( get('connectivity').wifi ))==null?'':_.escape(__t))+
'</dd>\n <dt>Bluetooth</dt>\n <dd>'+
((__t=( get('connectivity').bluetooth ))==null?'':_.escape(__t))+
'</dd>\n <dt>Infrared</dt>\n <dd>'+
((__t=( get('connectivity').infrared ))==null?'':_.escape(__t))+
'</dd>\n <dt>GPS</dt>\n <dd>'+
((__t=( get('connectivity').gps ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Android</span>\n <dl>\n <dt>OS Version</dt>\n <dd>'+
((__t=( get('android').os ))==null?'':_.escape(__t))+
'</dd>\n <dt>UI</dt>\n <dd>'+
((__t=( get('android').ui ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Size and Weight</span>\n <dl>\n <dt>Dimensions</dt>\n ';
_.each(get('sizeAndWeight').dimensions, function(dimension) {
__p+='\n <dd>'+
((__t=( dimension ))==null?'':_.escape(__t))+
'</dd>\n ';
})
__p+='\n <dt>Weight</dt>\n <dd>'+
((__t=( get('sizeAndWeight').weight ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Display</span>\n <dl>\n <dt>Screen size</dt>\n <dd>'+
((__t=( get('display').screenSize ))==null?'':_.escape(__t))+
'</dd>\n <dt>Screen resolution</dt>\n <dd>'+
((__t=( get('display').screenResolution ))==null?'':_.escape(__t))+
'</dd>\n <dt>Touch screen</dt>\n <dd>'+
((__t=( get('display').touchScreen ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Hardware</span>\n <dl>\n <dt>CPU</dt>\n <dd>'+
((__t=( get('hardware').cpu ))==null?'':_.escape(__t))+
'</dd>\n <dt>USB</dt>\n <dd>'+
((__t=( get('hardware').usb ))==null?'':_.escape(__t))+
'</dd>\n <dt>Audio / headphone jack</dt>\n <dd>'+
((__t=( get('hardware').audioJack ))==null?'':_.escape(__t))+
'</dd>\n <dt>FM Radio</dt>\n <dd>'+
((__t=( get('hardware').fmRadio ))==null?'':_.escape(__t))+
'</dd>\n <dt>Accelerometer</dt>\n <dd>'+
((__t=( get('hardware').accelerometer ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Camera</span>\n <dl>\n <dt>Primary</dt>\n <dd>'+
((__t=( get('camera').primary ))==null?'':_.escape(__t))+
'</dd>\n <dt>Features</dt>\n <dd>'+
((__t=( get('camera').features.join(', ') ))==null?'':_.escape(__t))+
'</dd>\n </dl>\n</li>\n\n<li>\n <span>Additional Features</span>\n <dd>'+
((__t=( get('additionalFeatures') ))==null?'':_.escape(__t))+
'</dd>\n</li>\n\n<li></li>';
}
return __p;
};
@@ -1,3 +1,11 @@
Phone = Backbone.Model.extend({
urlRoot: '/api/phones'
urlRoot: '/api/phones',

parse: function (res) {
if (res.images) {
this.photosCollection = new PhotosCollection(_.map(res.images, function (image_path) { return { path: image_path }; }));
this.set('mainImage', this.photosCollection.models[0]);
}
return res;
}
});
@@ -0,0 +1 @@
Photo = Backbone.Model;
@@ -1 +1,5 @@
TBD: detail view for [[= get('id') ]]
<div class='phone-images'></div>
<h1>[[= get('name') ]]</h1>
<p>[[= get('description') ]]</p>
<ul class='phone-thumbs'></ul>
<ul class='specs'></ul>
@@ -0,0 +1 @@
<img src="[[= '/' + get('path') ]]" class='phone'>
@@ -0,0 +1 @@
<img src="[[= '/' + get('path') ]]">
@@ -0,0 +1,112 @@
<li>
<span>Availability and Networks</span>
<dl>
<dt>Availability</dt>
<dd>[[= get('availability') ]]</dd>
</dl>
</li>

<li>
<span>Battery</span>
<dl>
<dt>Type</dt>
<dd>[[= get('battery').type ]]</dd>
<dt>Talk Time</dt>
<dd>[[= get('battery').talkTime ]]</dd>
<dt>Standby time (max)</dt>
<dd>[[= get('battery').standbyTime ]]</dd>
</dl>
</li>

<li>
<span>Storage and Memory</span>
<dl>
<dt>RAM</dt>
<dd>[[= get('storage').ram ]]</dd>
<dt>Internal Storage</dt>
<dd>[[= get('storage').flash ]]</dd>
</dl>
</li>

<li>
<span>Connectivity</span>
<dl>
<dt>Network Support</dt>
<dd>[[= get('connectivity').cell ]]</dd>
<dt>WiFi</dt>
<dd>[[= get('connectivity').wifi ]]</dd>
<dt>Bluetooth</dt>
<dd>[[= get('connectivity').bluetooth ]]</dd>
<dt>Infrared</dt>
<dd>[[= get('connectivity').infrared ]]</dd>
<dt>GPS</dt>
<dd>[[= get('connectivity').gps ]]</dd>
</dl>
</li>

<li>
<span>Android</span>
<dl>
<dt>OS Version</dt>
<dd>[[= get('android').os ]]</dd>
<dt>UI</dt>
<dd>[[= get('android').ui ]]</dd>
</dl>
</li>

<li>
<span>Size and Weight</span>
<dl>
<dt>Dimensions</dt>
[[ _.each(get('sizeAndWeight').dimensions, function(dimension) { ]]
<dd>[[= dimension ]]</dd>
[[ }) ]]
<dt>Weight</dt>
<dd>[[= get('sizeAndWeight').weight ]]</dd>
</dl>
</li>

<li>
<span>Display</span>
<dl>
<dt>Screen size</dt>
<dd>[[= get('display').screenSize ]]</dd>
<dt>Screen resolution</dt>
<dd>[[= get('display').screenResolution ]]</dd>
<dt>Touch screen</dt>
<dd>[[= get('display').touchScreen ]]</dd>
</dl>
</li>

<li>
<span>Hardware</span>
<dl>
<dt>CPU</dt>
<dd>[[= get('hardware').cpu ]]</dd>
<dt>USB</dt>
<dd>[[= get('hardware').usb ]]</dd>
<dt>Audio / headphone jack</dt>
<dd>[[= get('hardware').audioJack ]]</dd>
<dt>FM Radio</dt>
<dd>[[= get('hardware').fmRadio ]]</dd>
<dt>Accelerometer</dt>
<dd>[[= get('hardware').accelerometer ]]</dd>
</dl>
</li>

<li>
<span>Camera</span>
<dl>
<dt>Primary</dt>
<dd>[[= get('camera').primary ]]</dd>
<dt>Features</dt>
<dd>[[= get('camera').features.join(', ') ]]</dd>
</dl>
</li>

<li>
<span>Additional Features</span>
<dd>[[= get('additionalFeatures') ]]</dd>
</li>

<li></li>
@@ -0,0 +1,10 @@
PhonesShowImageView = Backbone.View.extend({

initialize: function () {
this.render();
},

render: function () {
this.$el.html(JST['phones/show_image'](this.model.get('mainImage')));
}
});
@@ -0,0 +1,10 @@
PhonesShowImagesListImageView = Backbone.View.extend({

initialize: function () {
this.render();
},

render: function () {
this.$el.html(JST['phones/show_images_list_image'](this.model));
}
});
@@ -0,0 +1,18 @@
PhonesShowImagesListView = Backbone.View.extend({

initialize: function () {
this.render();
},

render: function () {
this.$el.html('');
this.model.photosCollection.each(this.renderImage, this);
},

renderImage: function (photo) {
this.$el.append(new PhonesShowImagesListImageView({
tagName: 'li',
model: photo
}).el);
}
});
@@ -0,0 +1,10 @@
PhonesShowSpecsView = Backbone.View.extend({

initialize: function () {
this.render();
},

render: function () {
this.$el.html(JST['phones/show_specs'](this.model));
}
});
@@ -8,5 +8,20 @@ PhonesShowView = Backbone.View.extend({

render: function () {
this.$el.html(JST['phones/show'](this.model));

new PhonesShowImageView({
el: this.$('.phone-images'),
model: this.model
});

new PhonesShowImagesListView({
el: this.$('ul.phone-thumbs'),
model: this.model
});

new PhonesShowSpecsView({
el: this.$('ul.specs'),
model: this.model
});
}
});
@@ -21,3 +21,59 @@ body {
height: 100px;
padding-top: 15px;
}

/** Detail View **/
img.phone {
float: left;
border: 1px solid black;
margin-right: 3em;
margin-bottom: 2em;
background-color: white;
padding: 2em;
height: 400px;
width: 400px;
}

ul.phone-thumbs {
margin: 0;
list-style: none;
}

ul.phone-thumbs li {
border: 1px solid black;
display: inline-block;
margin: 1em;
background-color: white;
}

ul.phone-thumbs img {
height: 100px;
width: 100px;
padding: 1em;
}

ul.specs {
clear: both;
margin: 0;
padding: 0;
list-style: none;
}

ul.specs > li{
display: inline-block;
width: 200px;
vertical-align: top;
}

ul.specs > li > span{
font-weight: bold;
font-size: 1.2em;
}

ul.specs dt {
font-weight: bold;
}

h1 {
border-bottom: 1px solid gray;
}
@@ -13,11 +13,17 @@
<script src="/javascripts/jst.js"></script>

<script src="/javascripts/models/phone.js"></script>
<script src="/javascripts/models/photo.js"></script>
<script src="/javascripts/models/filter.js"></script>

<script src="/javascripts/collections/phones_collection.js"></script>
<script src="/javascripts/collections/photos_collection.js"></script>

<script src="/javascripts/views/phones/show_view.js"></script>
<script src="/javascripts/views/phones/show_image_view.js"></script>
<script src="/javascripts/views/phones/show_images_list_view.js"></script>
<script src="/javascripts/views/phones/show_images_list_image_view.js"></script>
<script src="/javascripts/views/phones/show_specs_view.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>

0 comments on commit 6337327

Please sign in to comment.
You can’t perform that action at this time.