Jason
/
safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
safaribook-knockout-essentials/ko-cart/index.html

83 lines
2.3 KiB
HTML
Raw Normal View History

chap1->Installing components
2021-05-27 11:29:14 +10:00
<!DOCTYPE html>
<html>
Prettifier html using Prettier
2021-05-27 11:49:42 +10:00
<head>
<title>KO Shopping Cart</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
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
2021-05-27 13:57:20 +10:00
<h1>Catalog</h1>
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="form-group">
<div class="col-sm-12">
Prettify html
2021-05-27 14:24:43 +10:00
<input
type="text"
class="form-control"
placeholder="Name"
data-bind="textInput:name"
/>
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
</div>
Prettify html
2021-05-27 14:24:43 +10:00
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="password"
class="form-control"
placeholder="Price"
data-bind="textInput:price"
/>
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
</div>
Prettify html
2021-05-27 14:24:43 +10:00
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="password"
class="form-control"
placeholder="Stock"
data-bind="textInput:stock"
/>
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
</div>
Prettify html
2021-05-27 14:24:43 +10:00
</div>
<div class="form-group">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-default"
data-bind="{click:$parent.addProduct}"
>
<i class="glyphicon glyphicon-plus-sign"> </i> Add Product
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
</button>
</div>
</div>
</form>
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
2021-05-27 13:57:20 +10:00
<strong>Items:</strong>
chap1->Observables to refresh the UI automatically->Inserting elements in collections 1. Learned with binding for context switch 2. Learned textInput for text binding 3. click binding for event driven
2021-05-27 14:22:28 +10:00
<span data-bind="text:catalog().length"></span>
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
2021-05-27 13:57:20 +10:00
<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>
chap1->The view-model->The view
2021-05-27 12:03:06 +10:00
<!-- vendor library -->
Prettifier html using Prettier
2021-05-27 11:49:42 +10:00
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
chap1->The view-model->The view
2021-05-27 12:03:06 +10:00
<!-- app -->
chap1->The view-model->The model 1. Create separate model 'Product' 2. Place link to product.js in HTML at correct place 3. Learn & apply Revealing Module Pattern on both Product module and viewmodel
2021-05-27 12:46:22 +10:00
<script type="text/javascript" src="js/models/product.js"></script>
chap1->The view-model->The view
2021-05-27 12:03:06 +10:00
<script type="text/javascript" src="js/viewmodel.js"></script>
Prettifier html using Prettier
2021-05-27 11:49:42 +10:00
</body>
</html>