From 9b7f2fefbe8b4f12a61dc9440894763175ed6367 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 20 Apr 2022 23:53:23 +1000
Subject: [PATCH] Chap02 -> Managing templates with jQuery

---
 ko-cart/index.html                      | 194 ------------------------
 ko-cart/js/viewmodel.js                 |  24 ++-
 ko-cart/views/add-to-catalog-modal.html |  76 ++++++++++
 ko-cart/views/cart-item.html            |  36 +++++
 ko-cart/views/cart-widget.html          |   4 +
 ko-cart/views/cart.html                 |  18 +++
 ko-cart/views/catalog.html              |  48 ++++++
 ko-cart/views/finish-order-modal.html   |  24 +++
 ko-cart/views/header.html               |  18 +++
 ko-cart/views/order.html                |  36 +++++
 10 files changed, 283 insertions(+), 195 deletions(-)
 create mode 100644 ko-cart/views/add-to-catalog-modal.html
 create mode 100644 ko-cart/views/cart-item.html
 create mode 100644 ko-cart/views/cart-widget.html
 create mode 100644 ko-cart/views/cart.html
 create mode 100644 ko-cart/views/catalog.html
 create mode 100644 ko-cart/views/finish-order-modal.html
 create mode 100644 ko-cart/views/header.html
 create mode 100644 ko-cart/views/order.html

diff --git a/ko-cart/index.html b/ko-cart/index.html
index f4c56b8..181d03d 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -21,200 +21,6 @@
       <div data-bind="template: {name:'finish-order-modal'}"></div>
     </div>
 
-    <!-- templates -->
-    <script type="text/html" id="header">
-      <h1>Catalog</h1>
-
-      <button
-        class="btn btn-primary btn-sm"
-        data-toggle="modal"
-        data-target="#addToCatalogModal"
-      >
-        Add New Product
-      </button>
-      <button
-        class="btn btn-primary btn-sm"
-        data-bind="click: showCartDetails, css:{ disabled: cart().length  < 1}"
-      >
-        Show Cart Details
-      </button>
-      <hr />
-    </script>
-    <script type="text/html" id="catalog">
-      <div class="input-group">
-        <span class="input-group-addon">
-          <i class="glyphicon glyphicon-search"></i> Search
-        </span>
-        <input type="text" class="form-control" data-bind="textInput:searchTerm">
-      </div>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Price</th>
-            <th>Stock</th>
-            <th></th>
-          </tr>
-        </thead>
-        <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="text:stock"></td>
-            <td>
-              <button class="btn btn-primary" data-bind="click:$parent.addToCart">
-                <i class="glyphicon glyphicon-plus-sign"></i> Add
-              </button>
-            </td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <td colspan="3">
-              <strong>Items:</strong><span data-bind="text:catalog().length"></span>
-            </td>
-            <td colspan="1">
-              <span data-bind="template:{name: 'cart-widget'}"></span>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </script>
-    <script type="text/html" id="add-to-catalog-modal">
-      <div class="modal fade" id="addToCatalogModal">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <form class="form-horizontal" role="form" data-bind="with:newProduct">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">
-                  <span aria-hidden="true">&times;</span>
-                  <span class="sr-only">Close</span>
-                </button>
-                <h3>Add New Product to the Catalog</h3>
-              </div>
-              <div class="modal-body">
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
-                  </div>
-                </div>
-              </div>
-              <div class="modal-footer">
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
-                      <i class="glyphicon glyphicon-plus-sign"></i> Add Product
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </form>
-          </div> <!-- /.modal-content -->
-        </div> <!-- /.modal-diaglog -->
-      </div> <!-- /.modal -->
-    </script>
-    <script type="text/html" id="cart-widget">
-      Total Items: <span data-bind="text:totalItems"></span>
-      Price: <span data-bind="text:grandTotal"></span>
-    </script>
-    <script type="text/html" id="cart-item">
-      <div class="list-group-item" style="overflow: hidden">
-        <button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
-          <span>&times;</span>
-        </button>
-        <h4 class="" data-bind="text:product.name"></h4>
-        <div class="input-group cart-unit">
-          <input type="text" class="form-control" data-bind="textInput:units" readonly/>
-          <span class="input-group-addon">
-            <div class="btn-group-vertical">
-              <button class="btn btn-default btn-xs" data-bind="click:addUnit">
-                <i class="glyphicon glyphicon-chevron-up"></i>
-              </button>
-              <button class="btn btn-default btn-xs" data-bind="click:removeUnit">
-                <i class="glyphicon glyphicon-chevron-down"></i>
-              </button>
-            </div>
-          </span>
-        </div>
-      </div>
-    </script>
-    <script type="text/html" id="cart">
-      <button type="button" class="close pull-right" data-bind="click:hideCartDetails">
-        <span>&times;</span>
-      </button>
-      <h1>Cart</h1>
-      <div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
-      <div data-bind="template: {name: 'cart-widget'}"></div>
-      <button class="btn btn-primary btn-sm" data-binid="click:showOrder">
-        Confirm Order
-      </button>
-    </script>
-    <script type="text/html" id="order">
-      <div class="col-xs-12">
-        <button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
-          Back to catalog
-        </button>
-        <button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
-          Buy & finish
-        </button>
-      </div>
-      <div class="col-xs-6">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Price</th>
-              <th>Units</th>
-              <th>Subtotal</th>
-            </tr>
-          </thead>
-          <tbody data-bind="foreach:cart">
-            <tr>
-              <td data-bind="text:product.name"></td>
-              <td data-bind="text:product.price"></td>
-              <td data-bind="text:units"></td>
-              <td data-bind="text:subtotal"></td>
-            </tr>
-          </tbody>
-          <tfoot>
-            <tr>
-              <td colspan="3"></td>
-              <td>
-                Total: <span data-bind="text:grandTotal"></span>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </script>
-    <script type="text/html" id="finish-order-modal">
-      <div class="modal fade" id="finishOrderModal">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-body">
-              <h2>Your order has been completed!</h2>
-            </div>
-            <div class="modal-footer">
-              <div class="form-group">
-                <div class="col-sm-12">
-                  <button type="submit" class="btn btn-success" data-dismiss="modal">Continue Shopping</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </script>
     <!-- vendor library -->
     <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.js"></script>
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index 810640c..9a5828d 100644
--- a/ko-cart/js/viewmodel.js
+++ b/ko-cart/js/viewmodel.js
@@ -134,4 +134,26 @@ var vm = (function () {
     visibleCart: visibleCart
   };
 })();
-ko.applyBindings(vm);
+
+var templates = [
+  'header',
+  'catalog',
+  'cart',
+  'cart-item',
+  'cart-widget',
+  'order',
+  'add-to-catalog-modal',
+  'finish-order-modal'
+];
+
+var busy = templates.length;
+templates.forEach(function(tpl){
+  "use strict";
+  $.get('views/' + tpl + '.html').then(function(data) {
+    $('body').append(data);
+    busy--;
+    if (!busy) {
+      ko.applyBindings(vm);
+    }
+  })
+})
\ No newline at end of file
diff --git a/ko-cart/views/add-to-catalog-modal.html b/ko-cart/views/add-to-catalog-modal.html
new file mode 100644
index 0000000..a8df684
--- /dev/null
+++ b/ko-cart/views/add-to-catalog-modal.html
@@ -0,0 +1,76 @@
+<script type="text/html" id="add-to-catalog-modal">
+    <div class="modal fade" id="addToCatalogModal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <form
+                    class="form-horizontal"
+                    role="form"
+                    data-bind="with:newProduct"
+                >
+                    <div class="modal-header">
+                        <button
+                            type="button"
+                            class="close"
+                            data-dismiss="modal"
+                        >
+                            <span aria-hidden="true">&times;</span>
+                            <span class="sr-only">Close</span>
+                        </button>
+                        <h3>Add New Product to the Catalog</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="form-group">
+                            <div class="col-sm-12">
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    placeholder="Name"
+                                    data-bind="textInput:name"
+                                />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-12">
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    placeholder="Price"
+                                    data-bind="textInput:price"
+                                />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-12">
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    placeholder="Stock"
+                                    data-bind="textInput:stock"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <div class="form-group">
+                            <div class="col-sm-12">
+                                <button
+                                    type="submit"
+                                    class="btn btn-default"
+                                    data-bind="{click:$parent.addProduct}"
+                                >
+                                    <i
+                                        class="glyphicon glyphicon-plus-sign"
+                                    ></i>
+                                    Add Product
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <!-- /.modal-content -->
+        </div>
+        <!-- /.modal-diaglog -->
+    </div>
+    <!-- /.modal -->
+</script>
diff --git a/ko-cart/views/cart-item.html b/ko-cart/views/cart-item.html
new file mode 100644
index 0000000..1f3f6d5
--- /dev/null
+++ b/ko-cart/views/cart-item.html
@@ -0,0 +1,36 @@
+<script type="text/html" id="cart-item">
+    <div class="list-group-item" style="overflow: hidden">
+        <button
+            type="button"
+            class="close pull-right"
+            data-bind="click:$root.removeFromCart"
+        >
+            <span>&times;</span>
+        </button>
+        <h4 class="" data-bind="text:product.name"></h4>
+        <div class="input-group cart-unit">
+            <input
+                type="text"
+                class="form-control"
+                data-bind="textInput:units"
+                readonly
+            />
+            <span class="input-group-addon">
+                <div class="btn-group-vertical">
+                    <button
+                        class="btn btn-default btn-xs"
+                        data-bind="click:addUnit"
+                    >
+                        <i class="glyphicon glyphicon-chevron-up"></i>
+                    </button>
+                    <button
+                        class="btn btn-default btn-xs"
+                        data-bind="click:removeUnit"
+                    >
+                        <i class="glyphicon glyphicon-chevron-down"></i>
+                    </button>
+                </div>
+            </span>
+        </div>
+    </div>
+</script>
diff --git a/ko-cart/views/cart-widget.html b/ko-cart/views/cart-widget.html
new file mode 100644
index 0000000..6e8491f
--- /dev/null
+++ b/ko-cart/views/cart-widget.html
@@ -0,0 +1,4 @@
+<script type="text/html" id="cart-widget">
+    Total Items: <span data-bind="text:totalItems"></span> Price:
+    <span data-bind="text:grandTotal"></span>
+</script>
diff --git a/ko-cart/views/cart.html b/ko-cart/views/cart.html
new file mode 100644
index 0000000..9032529
--- /dev/null
+++ b/ko-cart/views/cart.html
@@ -0,0 +1,18 @@
+<script type="text/html" id="cart">
+    <button
+        type="button"
+        class="close pull-right"
+        data-bind="click:hideCartDetails"
+    >
+        <span>&times;</span>
+    </button>
+    <h1>Cart</h1>
+    <div
+        data-bind="template: {name: 'cart-item', foreach:cart}"
+        class="list-group"
+    ></div>
+    <div data-bind="template: {name: 'cart-widget'}"></div>
+    <button class="btn btn-primary btn-sm" data-bind="click:showOrder">
+        Confirm Order
+    </button>
+</script>
diff --git a/ko-cart/views/catalog.html b/ko-cart/views/catalog.html
new file mode 100644
index 0000000..6f4df0e
--- /dev/null
+++ b/ko-cart/views/catalog.html
@@ -0,0 +1,48 @@
+<script type="text/html" id="catalog">
+    <div class="input-group">
+        <span class="input-group-addon">
+            <i class="glyphicon glyphicon-search"></i> Search
+        </span>
+        <input
+            type="text"
+            class="form-control"
+            data-bind="textInput:searchTerm"
+        />
+    </div>
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Price</th>
+                <th>Stock</th>
+                <th></th>
+            </tr>
+        </thead>
+        <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="text:stock"></td>
+                <td>
+                    <button
+                        class="btn btn-primary"
+                        data-bind="click:$parent.addToCart"
+                    >
+                        <i class="glyphicon glyphicon-plus-sign"></i> Add
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <td colspan="3">
+                    <strong>Items:</strong
+                    ><span data-bind="text:catalog().length"></span>
+                </td>
+                <td colspan="1">
+                    <span data-bind="template:{name: 'cart-widget'}"></span>
+                </td>
+            </tr>
+        </tfoot>
+    </table>
+</script>
diff --git a/ko-cart/views/finish-order-modal.html b/ko-cart/views/finish-order-modal.html
new file mode 100644
index 0000000..33bb66e
--- /dev/null
+++ b/ko-cart/views/finish-order-modal.html
@@ -0,0 +1,24 @@
+<script type="text/html" id="finish-order-modal">
+    <div class="modal fade" id="finishOrderModal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <h2>Your order has been completed!</h2>
+                </div>
+                <div class="modal-footer">
+                    <div class="form-group">
+                        <div class="col-sm-12">
+                            <button
+                                type="submit"
+                                class="btn btn-success"
+                                data-dismiss="modal"
+                            >
+                                Continue Shopping
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
diff --git a/ko-cart/views/header.html b/ko-cart/views/header.html
new file mode 100644
index 0000000..12a358f
--- /dev/null
+++ b/ko-cart/views/header.html
@@ -0,0 +1,18 @@
+<script type="text/html" id="header">
+    <h1>Catalog</h1>
+
+    <button
+        class="btn btn-primary btn-sm"
+        data-toggle="modal"
+        data-target="#addToCatalogModal"
+    >
+        Add New Product
+    </button>
+    <button
+        class="btn btn-primary btn-sm"
+        data-bind="click: showCartDetails, css:{ disabled: cart().length  < 1}"
+    >
+        Show Cart Details
+    </button>
+    <hr />
+</script>
diff --git a/ko-cart/views/order.html b/ko-cart/views/order.html
new file mode 100644
index 0000000..c308ce8
--- /dev/null
+++ b/ko-cart/views/order.html
@@ -0,0 +1,36 @@
+<script type="text/html" id="order">
+    <div class="col-xs-12">
+        <button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
+            Back to catalog
+        </button>
+        <button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
+            Buy & finish
+        </button>
+    </div>
+    <div class="col-xs-6">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Price</th>
+                    <th>Units</th>
+                    <th>Subtotal</th>
+                </tr>
+            </thead>
+            <tbody data-bind="foreach:cart">
+                <tr>
+                    <td data-bind="text:product.name"></td>
+                    <td data-bind="text:product.price"></td>
+                    <td data-bind="text:units"></td>
+                    <td data-bind="text:subtotal"></td>
+                </tr>
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="3"></td>
+                    <td>Total: <span data-bind="text:grandTotal"></span></td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</script>