Jason/safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chap1->Observables to refresh the UI automatically->Managing collections with observables

Browse Source 
1. Learned what is observableArray

2. Create catalog in viewmodel using observableArray

3. Create foreach databind in html
This commit is contained in:
jason.zhu 2021-05-27 03:57:20 +00:00
parent 31e524fe17
commit 27dfb6c739
2 changed files with 29 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ko-cart/index.html
View File

@ -6,52 +6,25 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<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 />
<strong>Name:</strong>
<span data-bind="text:product.name"></span><br />
<strong>Price:</strong>
<span data-bind="text:product.price"></span><br />
<strong>Stock:</strong>
<span data-bind="text:product.stock"></span>
</div>
</div>
</div>
</div>
<h1>Catalog</h1>
<strong>Items:</strong>
<span data-bind="text:catalog.length"></span>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody data-bind="foreach:catalog">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:price"></td>
<td data-bind="text:stock"></td>
</tr>
</tbody>
</table>
<!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

12
ko-cart/js/viewmodel.js
View File

@ -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);