From 31e524fe17914eee851692423c84793e70aca2ac Mon Sep 17 00:00:00 2001
From: "jason.zhu" <jason.zhu@xero.com>
Date: Thu, 27 May 2021 03:01:16 +0000
Subject: [PATCH] chap1->Observables to refresh the UI automatically\n 1.
 Learned what's Observables \n 2. modify HTML and product.js for data-binding

---
 ko-cart/index.html           | 28 ++++++++++++++++++++++++++++
 ko-cart/js/models/product.js |  9 +++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index 25684d2..c0338fa 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -11,6 +11,34 @@
         <div class="col-md-12">
           <!-- our app goes here -->
           <h1>Product</h1>
+
+          <div>
+            <strong>ID:</strong>
+            <input
+              class="form-control"
+              type="text"
+              data-bind="value:product.id"
+            /><br />
+            <strong>Name:</strong>
+            <input
+              class="form-control"
+              type="text"
+              data-bind="value:product.name"
+            /><br />
+            <strong>Price:</strong>
+            <input
+              class="form-control"
+              type="text"
+              data-bind="value:product.price"
+            /><br />
+            <strong>Stock:</strong>
+            <input
+              class="form-control"
+              type="text"
+              data-bind="value:product.stock"
+            /><br />
+          </div>
+
           <div>
             <strong>ID:</strong>
             <span data-bind="text:product.id"></span><br />
diff --git a/ko-cart/js/models/product.js b/ko-cart/js/models/product.js
index d958856..97aa885 100644
--- a/ko-cart/js/models/product.js
+++ b/ko-cart/js/models/product.js
@@ -1,9 +1,10 @@
+"use strict";
 var Product = function (id, name, price, stock) {
   "use strict";
-  var _id = id,
-    _name = name,
-    _price = price,
-    _stock = stock;
+  var _id = ko.observable(id),
+    _name = ko.observable(name),
+    _price = ko.observable(price),
+    _stock = ko.observable(stock);
   return {
     id: _id,
     name: _name,