Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add fetching prices from the API and displaying them

  • Loading branch information...
commit aaf534fcaf0997b1f3efc9bf08a46f1c1ac98b69 1 parent 00ad0ef
Edmund von der Burg authored December 25, 2012
22  public/index.html
@@ -50,6 +50,9 @@
50 50
   <div id="book-box">      
51 51
   </div>
52 52
 
  53
+  <div id="prices-box">
  54
+  </div>
  55
+
53 56
 </script>
54 57
 
55 58
 <script id="search-box-template" type="text/template">
@@ -71,4 +74,21 @@
71 74
     <strong>isbn:</strong> <%- isbn || '???' %>
72 75
   </p>
73 76
 
74  
-</script>
  77
+</script>
  78
+
  79
+<script id="price-template" type="text/template">
  80
+
  81
+    <p>
  82
+      <strong>price:</strong> <%- price || '???' %>
  83
+    </p>
  84
+
  85
+</script>
  86
+
  87
+<script id="price-none-template" type="text/template">
  88
+
  89
+    <p>
  90
+      There are no prices to show
  91
+    </p>
  92
+
  93
+</script>
  94
+
46  public/js/app.js
@@ -17,7 +17,8 @@
17 17
   
18 18
     regions: {
19 19
       searchBox: "#search-box",
20  
-      bookBox:   "#book-box"
  20
+      bookBox:   "#book-box",
  21
+      pricesBox: "#prices-box"
21 22
     }
22 23
     
23 24
   });
@@ -45,6 +46,30 @@
45 46
     }
46 47
   });
47 48
   
  49
+  var PriceView  = Backbone.Marionette.ItemView.extend({
  50
+    template: "#price-template"
  51
+  });
  52
+  
  53
+  var PriceEmptyView  = Backbone.Marionette.ItemView.extend({
  54
+    template: "#price-none-template"
  55
+  });
  56
+  
  57
+  var PricesView = Backbone.Marionette.CollectionView.extend({
  58
+    itemView: PriceView,
  59
+    emptyView: PriceEmptyView
  60
+  });
  61
+  
  62
+  var PriceModel = Backbone.Model.extend({
  63
+    defaults: {
  64
+      price: ''
  65
+    }
  66
+  });
  67
+  
  68
+  var PriceCollection = Backbone.Collection.extend({
  69
+    model: PriceModel,
  70
+    comparator: 'price'
  71
+  });
  72
+  
48 73
   var Router = Backbone.Router.extend({
49 74
     routes: {
50 75
       "isbn/:isbn": "isbnDisplay"
@@ -52,11 +77,20 @@
52 77
     
53 78
     isbnDisplay: function (isbn) {
54 79
 
55  
-      var model = new BookModel({ id: isbn });
56  
-      var view  = new BookView({ model: model });
57  
-      L2BDemoApp.layout.bookBox.show(view);
58  
-  
59  
-      model.fetch();
  80
+      // Get the book details
  81
+      var book = new BookModel({ id: isbn });
  82
+      book.fetch();
  83
+      L2BDemoApp.layout.bookBox.show(
  84
+        new BookView({ model: book })
  85
+      );
  86
+
  87
+      // Get the prices
  88
+      var prices = new PriceCollection();
  89
+      prices.url = book.url() + '/prices';
  90
+      prices.fetch();
  91
+      L2BDemoApp.layout.pricesBox.show(
  92
+        new PricesView({ collection: prices })
  93
+      );
60 94
 
61 95
     }
62 96
   });
2  public/sass/screen.scss
@@ -25,7 +25,7 @@ strong {
25 25
 header { border-bottom: 1px solid #888;}
26 26
 footer { border-top:    1px solid #888;}
27 27
 
28  
-#search-box, #book-box {
  28
+#search-box, #book-box, #prices-box {
29 29
   margin: 1em;
30 30
   padding: 1em;
31 31
   background-color: #eee;

0 notes on commit aaf534f

Please sign in to comment.
Something went wrong with that request. Please try again.