chap3 -> Creating a binding to debug - the toJSON binding

ko-cart/index.html

@@ -15,11 +15,11 @@
                     <div class="well" data-bind="template:{name:'cart'}"></div>
                 </div>
             </div>
-            <!-- <div class="row" data-bind="ifnot: visibleCatalog">
-                <div data-bind="template:{name:'order'}"></div>
+            <div class="row" data-bind="ifnot: visibleCatalog"> <div data-bind="template:{name:'order'}"></div>
             </div>
             <div data-bind="template: {name:'add-to-catalog-modal'}"></div>
-            <div data-bind="template: {name:'finish-order-modal'}"></div> -->
+            <div data-bind="template: {name:'finish-order-modal'}"></div>
+            <pre class="well well-lg" data-bind="toJSON: $root"></pre>
         </div>
 
         <!-- vendor library -->
@@ -27,6 +27,7 @@
         <script type="text/javascript" src="js/vendors/bootstrap.js"></script>
         <script type="text/javascript" src="js/vendors/knockout-3.2.0.js"></script>
         <script type="text/javascript" src="js/vendors/koExternalTemplateEngine_all.js"></script>
+        <script type="text/javascript" src="js/custom/koBindings.js"></script>
         <!-- app -->
         <script type="text/javascript" src="js/models/Product.js"></script>
         <script type="text/javascript" src="js/models/CartProduct.js"></script>

ko-cart/js/custom/koBindings.js

@@ -0,0 +1,33 @@
+ko.bindingHandlers.toggle = {
+  init: function (element, valueAccessor) {
+    var value = valueAccessor();
+    ko.applyBindingsToNode(element, {
+      click: function () {
+        value(!value());
+      },
+    });
+  },
+};
+
+ko.bindingHandlers.currency = {
+  symbol: ko.observable("$"),
+  update: function (element, valueAccessor, allBindingsAccessor) {
+    return ko.bindingHandlers.text.update(element, function () {
+      var value = +(ko.unwrap(valueAccessor()) || 0);
+      var symbol = ko.unwrap(
+        allBindingsAccessor().symbol !== undefined
+          ? allBindingsAccessor().symbol
+          : ko.bindingHandlers.currency.symbol
+      );
+      return symbol + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+    });
+  },
+};
+
+ko.bindingHandlers.toJSON = {
+  update: function (element, valueAccessor) {
+    return ko.bindingHandlers.text.update(element, function () {
+      return ko.toJSON(valueAccessor(), null, 2);
+    });
+  },
+};

ko-cart/views/catalog.html

@@ -20,7 +20,7 @@
         <tbody data-bind="foreach:catalog">
             <tr data-bind="style:lineColor">
                 <td data-bind="text:name"></td>
-                <td data-bind="text:price"></td>
+                <td data-bind="currency:price, symbol:'€'"></td>
                 <td data-bind="text:stock"></td>
                 <td>
                     <button

ko-cart/views/header.html

@@ -9,7 +9,7 @@
     </button>
     <button
         class="btn btn-primary btn-sm"
-        data-bind="click: showCartDetails, css:{ disabled: cart().length  < 1}"
+        data-bind="toggle:visibleCart, css:{ disabled: cart().length  < 1}"
     >
         Show Cart Details
     </button>