complete chapter 3.

2 files changed, 116 insertions, 9 deletions

diff --git a/src/index.html b/index.html
index c1a64be..69542c6 100644
--- a/src/index.html
+++ b/index.html
@@ -22,8 +22,7 @@
       </div>
     </div>
     <div id="main" class="container-fluid">
-      <div id="application">
-      </div> 
+      <div id="application"></div>
     </div>
     <footer>
     <hr>  
@@ -48,11 +47,19 @@
         </div>
       </div>
     </script>
-    <script type="text/javascript" src="../lib/jquery.js"></script>
-    <script type="text/javascript" src="../lib/underscore.js"></script>
-    <script type="text/javascript" src="../lib/backbone.js"></script>
-    <script type="text/javascript" src="../lib/backbone.marionette.js"></script>
-    <script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
-    <script src="js/bookstore.js"></script>
+    <script id="books-template" type="text/html">
+      BLAH
+      <ul>
+        <% _.each(items, function(item){ %>
+        <li><a href="book/<%= item.id %>"><%= item.name %></a></li>
+        <% }); %>
+      </ul>
+    </script>
+    <script type="text/javascript" src="/lib/jquery.js"></script>
+    <script type="text/javascript" src="/lib/underscore.js"></script>
+    <script type="text/javascript" src="/lib/backbone.js"></script>
+    <script type="text/javascript" src="/lib/backbone.marionette.js"></script>
+    <script type="text/javascript" src="/lib/bootstrap/js/bootstrap.min.js"></script>
+    <script src="src/js/bookstore.js"></script>
   </body>
 </html>
diff --git a/src/js/bookstore.js b/src/js/bookstore.js
index 56d0d48..d76cf6f 100644
--- a/src/js/bookstore.js
+++ b/src/js/bookstore.js
@@ -1 +1,101 @@
-var bookStoreApp = new Backbone.Marionette.Application();
+var BookStoreApp = new Backbone.Marionette.Application();
+
+var BookStoreController = Backbone.Marionette.Controller.extend({
+  displayBooks: function() {
+    console.log('display books.');
+  }
+});
+
+var BookStoreRouter = Backbone.Marionette.AppRouter.extend({
+  controller: BookStoreController,
+  appRoutes: {
+    "": "displayBooks"
+  }
+});
+
+BookStoreApp.addInitializer(function() {
+  var controller = new BookStoreController();
+  var router = new BookStoreRouter({controller: controller});
+  console.log('addInitializer');
+});
+
+BookStoreApp.on('initialize:after', function(){
+  if (Backbone.history) {
+    Backbone.history.start();
+  }
+  console.log('message from initialize:after method.');
+});
+BookStoreApp.start();
+
+var BookModel = Backbone.Model.extend({
+  defaults: {
+    id: "1",
+    name: "First",
+  }
+});
+
+var BookCollection = Backbone.Collection.extend({
+  model: BookModel
+});
+
+var bookModel = new BookModel();
+var bookModel2 = new BookModel({id: "2", name: "second"});
+var bookModel3 = new BookModel({id: "3", name: "third"});
+var bookCollection = new BookCollection();
+bookCollection.add(bookModel);
+bookCollection.add(bookModel2);
+bookCollection.add(bookModel3);
+
+var BookListView = Marionette.ItemView.extend({
+  template: '#books-template'
+});
+var view = new BookListView({
+  collection: bookCollection
+});
+view.render();
+
+var CategoryView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: '#categoryTemplate',
+});
+
+var CategoriesView = Backbone.Marionette.CollectionView.extend({
+  tagName: 'ul',
+  className: 'unstyled',
+  itemView: CategoryView
+});
+
+//var categoriesView = new CategoriesView({collection: categories});
+//categoriesView.render();
+
+var CatalogLayout = Backbone.Marionette.LayoutView.extend({
+  template: '#CatalogLayout',
+  regions: {
+    categories: '#categories',
+    products: '#products',
+    order: '#order',
+    book: '#book'
+  }
+});
+
+var catalogLayout = new CatalogLayout();
+catalogLayout.render();
+
+var HandyView = Backbone.Marionette.ItemView.extend({
+  initialize: function(){
+    Backbone.Marionette.ItemView.prototype.initialize.apply(this, arguments);
+  },
+  logMessage: function(message) {
+    console.log(message);
+  }
+});
+
+var BookView = HandyView.extend({
+  alertMessage: function(message) {
+    alert(message);
+  }
+});
+
+var bookView = new BookView();
+bookView.logMessage('hi');
+bookView.alertMessage('bye');