Permalink
Browse files

Add fetching prices from the API and displaying them

  • Loading branch information...
1 parent 00ad0ef commit aaf534fcaf0997b1f3efc9bf08a46f1c1ac98b69 @evdb evdb committed Dec 25, 2012
Showing with 62 additions and 8 deletions.
  1. +21 −1 public/index.html
  2. +40 −6 public/js/app.js
  3. +1 −1 public/sass/screen.scss
View
@@ -50,6 +50,9 @@
<div id="book-box">
</div>
+ <div id="prices-box">
+ </div>
+
</script>
<script id="search-box-template" type="text/template">
@@ -71,4 +74,21 @@
<strong>isbn:</strong> <%- isbn || '???' %>
</p>
-</script>
+</script>
+
+<script id="price-template" type="text/template">
+
+ <p>
+ <strong>price:</strong> <%- price || '???' %>
+ </p>
+
+</script>
+
+<script id="price-none-template" type="text/template">
+
+ <p>
+ There are no prices to show
+ </p>
+
+</script>
+
View
@@ -17,7 +17,8 @@
regions: {
searchBox: "#search-box",
- bookBox: "#book-box"
+ bookBox: "#book-box",
+ pricesBox: "#prices-box"
}
});
@@ -45,18 +46,51 @@
}
});
+ var PriceView = Backbone.Marionette.ItemView.extend({
+ template: "#price-template"
+ });
+
+ var PriceEmptyView = Backbone.Marionette.ItemView.extend({
+ template: "#price-none-template"
+ });
+
+ var PricesView = Backbone.Marionette.CollectionView.extend({
+ itemView: PriceView,
+ emptyView: PriceEmptyView
+ });
+
+ var PriceModel = Backbone.Model.extend({
+ defaults: {
+ price: ''
+ }
+ });
+
+ var PriceCollection = Backbone.Collection.extend({
+ model: PriceModel,
+ comparator: 'price'
+ });
+
var Router = Backbone.Router.extend({
routes: {
"isbn/:isbn": "isbnDisplay"
},
isbnDisplay: function (isbn) {
- var model = new BookModel({ id: isbn });
- var view = new BookView({ model: model });
- L2BDemoApp.layout.bookBox.show(view);
-
- model.fetch();
+ // Get the book details
+ var book = new BookModel({ id: isbn });
+ book.fetch();
+ L2BDemoApp.layout.bookBox.show(
+ new BookView({ model: book })
+ );
+
+ // Get the prices
+ var prices = new PriceCollection();
+ prices.url = book.url() + '/prices';
+ prices.fetch();
+ L2BDemoApp.layout.pricesBox.show(
+ new PricesView({ collection: prices })
+ );
}
});
View
@@ -25,7 +25,7 @@ strong {
header { border-bottom: 1px solid #888;}
footer { border-top: 1px solid #888;}
-#search-box, #book-box {
+#search-box, #book-box, #prices-box {
margin: 1em;
padding: 1em;
background-color: #eee;

0 comments on commit aaf534f

Please sign in to comment.