Permalink
Browse files

step-10 image swapping

  • Loading branch information...
204NoContent committed Apr 15, 2014
1 parent 29943da commit 98d25f04bf9adbb31f0be59bf421c09aa2da6c73
View
@@ -1,4 +1,81 @@
backbone-phonecat
=================
# AngularJS Phone Catalog Tutorial Application Coded in Backbone
## Overview
This tutorial builds a web application using Backbone.js. This tutorial is based on the [AngularJS PhoneCat Tutorial App](http://docs.angularjs.org/tutorial) and mirrors the functionality of each of the first 10 steps.
The full tutorial can be found on [my blog](http://204nocontent.me/i-coded-the-angular-tutorial-app-in-backbone-and-it-took-260-more-code).
## Prerequisites
### Git
- [Set up](http://help.github.com/articles/set-up-git)
- [Git home](http://http://git-scm.com/) (download, documentation)
### Node.js
- [Get Node.js](http://http://nodejs.org/download/).
## Workings of the application
- A basic Node app serves static files and JSON.
- All Backbone app files are located in /public/javascripts.
- /public/javascripts/lib contains Backbone.js and its dependencies.
- /public/javascripts/jst.js is a templating dictionary automatically created by Node (you can just ignore it).
## Commits / Tutorial Outline
You can check out any point of the tutorial using
git checkout step-?
To see the changes between any two lessons use the git diff command
git diff step-?..step-?
### step-0
Basic structure for a new Backbone app.
### step-1
Render a static phone list using a Backbone template.
### step-2
Create Backbone models and collection to represent a list of phones.
### step-3
Add interactive text search to phones.
### step-4
Add the ability to order phones.
### step-5
Fetch phones data using a JSON API.
### step-6
Fill out the phones template with images and links.
### step-7
Route the phone details view.
### step-8
Fill out the phone details view.
### step-9
Add a custom view helper to create checkmarks.
### step-10
Replace the phone's main image when a user clicks on a tumbnail.
AngularJS tutorial application "PhoneCat" coded in Backbone.js
View
@@ -12,14 +12,14 @@ __p+='\n <option value="'+
((__t=( option.text ))==null?'':_.escape(__t))+
'</option>\n ';
})
__p+='\n</select>';
__p+='\n</select>\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+='<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>';
__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>\n';
}
return __p;
};
@@ -36,7 +36,7 @@ __p+='<a href="/phones/'+
((__t=( get('name') ))==null?'':_.escape(__t))+
'</a>\n<p>'+
((__t=( get('snippet') ))==null?'':_.escape(__t))+
'</p>';
'</p>\n';
}
return __p;
};
@@ -47,7 +47,7 @@ __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>';
'</p>\n<ul class=\'phone-thumbs\'></ul>\n<ul class=\'specs\'></ul>\n';
}
return __p;
};
@@ -56,7 +56,7 @@ 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\'>';
'" class=\'phone\'>\n';
}
return __p;
};
@@ -65,7 +65,7 @@ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments
with(obj||{}){
__p+='<img src="'+
((__t=( '/' + get('path') ))==null?'':_.escape(__t))+
'">';
'">\n';
}
return __p;
};
@@ -128,7 +128,7 @@ __p+='\n <dt>Weight</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>';
'</dd>\n</li>\n\n<li></li>\n';
}
return __p;
};
@@ -1,10 +1,17 @@
PhonesShowImageView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model.photosCollection, 'imageSelected', this.setMainImage);
this.listenTo(this.model, 'change:mainImage', this.render);
this.render();
},
render: function () {
this.$el.html(JST['phones/show_image'](this.model.get('mainImage')));
},
setMainImage: function (photo) {
this.model.set('mainImage', photo);
}
});
@@ -1,10 +1,17 @@
PhonesShowImagesListImageView = Backbone.View.extend({
events: {
'click': 'selectImage'
},
initialize: function () {
this.render();
},
render: function () {
this.$el.html(JST['phones/show_images_list_image'](this.model));
},
selectImage: function (event) {
this.model.trigger('imageSelected', this.model);
}
});
@@ -52,6 +52,11 @@ ul.phone-thumbs img {
padding: 1em;
}
ul.phone-thumbs img:hover {
cursor: pointer;
}
ul.specs {
clear: both;
margin: 0;

0 comments on commit 98d25f0

Please sign in to comment.