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

@@ -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 />

ko-cart/js/models/product.js

@@ -1,9 +1,10 @@
+"use strict";
 var Product = function (id, name, price, stock) {
   "use strict";
-  var _id = id,
+  var _id = ko.observable(id),
-    _name = name,
+    _name = ko.observable(name),
-    _price = price,
+    _price = ko.observable(price),
-    _stock = stock;
+    _stock = ko.observable(stock);
   return {
     id: _id,
     name: _name,