From 27dfb6c739d2e2ff171dd3939fe921ad9d2f1286 Mon Sep 17 00:00:00 2001 From: "jason.zhu" Date: Thu, 27 May 2021 03:57:20 +0000 Subject: [PATCH] chap1->Observables to refresh the UI automatically->Managing collections with observables 1. Learned what is observableArray 2. Create catalog in viewmodel using observableArray 3. Create foreach databind in html --- ko-cart/index.html | 65 ++++++++++++----------------------------- ko-cart/js/viewmodel.js | 12 ++++++-- 2 files changed, 29 insertions(+), 48 deletions(-) diff --git a/ko-cart/index.html b/ko-cart/index.html index c0338fa..10303e2 100644 --- a/ko-cart/index.html +++ b/ko-cart/index.html @@ -6,52 +6,25 @@ -
-
-
- -

Product

- -
- ID: -
- Name: -
- Price: -
- Stock: -
-
- -
- ID: -
- Name: -
- Price: -
- Stock: - -
-
-
-
+

Catalog

+ Items: + + + + + + + + + + + + + + + + +
NamePriceStock
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js index 7e001d3..ec897ae 100644 --- a/ko-cart/js/viewmodel.js +++ b/ko-cart/js/viewmodel.js @@ -1,7 +1,15 @@ +"use strict"; var vm = (function() { - product: Product(1, 'T-Shirt', 10, 20); + + var catalog = [ + Product(1, "T-Shirt", 10.00, 20), + Product(2, "Trousers", 20.00, 10), + Product(3, "Shirt", 15.00, 20), + Product(4, "Shorts", 5.00, 10) + ]; + return { - product: product + catalog: catalog }; })(); ko.applyBindings(vm); \ No newline at end of file