step-6 phone images and links

public/javascripts/jst.js

@@ -26,11 +26,17 @@ 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+=''+
+__p+='<a href="/phones/'+
+((__t=( get('id') ))==null?'':_.escape(__t))+
+'" class=\'thumb\'><img src="'+
+((__t=( '/' + get('imageUrl') ))==null?'':_.escape(__t))+
+'"></a>\n<a href="/phones/'+
+((__t=( get('id') ))==null?'':_.escape(__t))+
+'">'+
 ((__t=( get('name') ))==null?'':_.escape(__t))+
-'\n<p>'+
+'</a>\n<p>'+
 ((__t=( get('snippet') ))==null?'':_.escape(__t))+
-'</p>\n';
+'</p>';
 }
 return __p;
 };

public/javascripts/templates/phones/index_list_phone.jst

@@ -1,2 +1,3 @@
-[[= get('name') ]]
+<a href="/phones/[[= get('id') ]]" class='thumb'><img src="[[= '/' + get('imageUrl') ]]"></a>
+<a href="/phones/[[= get('id') ]]">[[= get('name') ]]</a>
 <p>[[= get('snippet') ]]</p>

public/javascripts/views/phones/index_list_phone_view.js

@@ -1,11 +1,20 @@
 PhonesIndexListPhoneView = Backbone.View.extend({
 
+    events: {
+        'click a': 'navigate'
+    },
+
     initialize: function () {
         this.listenTo(this.model, 'remove', this.remove);
         this.render();
     },
 
     render: function () {
         this.$el.html(JST['phones/index_list_phone'](this.model));
+    },
+
+    navigate: function (event) {
+        event.preventDefault();
+        App.navigate(event.currentTarget.pathname, { trigger: true });
     }
 });

public/javascripts/views/phones/index_list_view.js

@@ -23,6 +23,7 @@ PhonesIndexListView = Backbone.View.extend({
         var position = this.filtered_collection.indexOf(phone);
         this.phoneView = new PhonesIndexListPhoneView({
             tagName: 'li',
+            className: 'thumbnail',
             model: phone
         });
 

public/stylesheets/app.css

@@ -4,3 +4,20 @@ body {
   padding-top: 20px;
 }
 
+.phones {
+  list-style: none;
+}
+
+.thumb {
+  float: left;
+  margin: -1em 1em 1.5em 0em;
+  padding-bottom: 1em;
+  height: 100px;
+  width: 100px;
+}
+
+.phones li {
+  clear: both;
+  height: 100px;
+  padding-top: 15px;
+}