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" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head> </head>
<body> <body>
<div class="container-fluid"> <h1>Catalog</h1>
<div class="row"> <strong>Items:</strong>
<div class="col-md-12"> <span data-bind="text:catalog.length"></span>
<!-- our app goes here --> <table class="table">
<h1>Product</h1> <thead>
<tr>
<div> <th>Name</th>
<strong>ID:</strong> <th>Price</th>
<input <th>Stock</th>
class="form-control" </tr>
type="text" </thead>
data-bind="value:product.id" <tbody data-bind="foreach:catalog">
/><br /> <tr>
<strong>Name:</strong> <td data-bind="text:name"></td>
<input <td data-bind="text:price"></td>
class="form-control" <td data-bind="text:stock"></td>
type="text" </tr>
data-bind="value:product.name" </tbody>
/><br /> </table>
<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>
<!-- vendor library --> <!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <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() { 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 { return {
product: product catalog: catalog
}; };
})(); })();
ko.applyBindings(vm); ko.applyBindings(vm);