From 7c1c4ee8f112a73be25876ce11e51d0137a742b6 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Sat, 30 Apr 2022 18:56:38 +1000
Subject: [PATCH] chap3 -> Custom bindings -> The toggle binding

---
 ko-cart/index.html              |  1 +
 ko-cart/js/custom/koBindings.js | 10 ++++++++++
 ko-cart/views/header.html       |  2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 ko-cart/js/custom/koBindings.js

diff --git a/ko-cart/index.html b/ko-cart/index.html
index 3474230..a98d712 100644
--- a/ko-cart/index.html
+++ b/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>
diff --git a/ko-cart/js/custom/koBindings.js b/ko-cart/js/custom/koBindings.js
new file mode 100644
index 0000000..4539768
--- /dev/null
+++ b/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());
+            }
+        });
+    }
+};
\ No newline at end of file
diff --git a/ko-cart/views/header.html b/ko-cart/views/header.html
index cab4da7..b0c1556 100644
--- a/ko-cart/views/header.html
+++ b/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>