chap3 -> Custom bindings -> The toggle binding

ko-cart/index.html

@@ -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,10 @@
+ko.bindingHandlers.toggle = {
+    init: function (element, valueAccessor) {
+        var value = valueAccessor();
+        ko.applyBindingsToNode(element, {
+            click: function() {
+                value(!value());
+            }
+        });
+    }
+};

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>