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

Chap02 -> Managing templates with jQuery

chap2
Jason Zhu 2022-04-20 23:53:23 +10:00
parent 0e06cb0806
commit 9b7f2fefbe
10 changed files with 283 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
ko-cart/index.html
View File

@ -21,200 +21,6 @@
<div data-bind="template: {name:'finish-order-modal'}"></div>
</div>
<!-- templates -->
<script type="text/html" id="header">
<h1>Catalog</h1>
<button
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#addToCatalogModal"
>
Add New Product
</button>
<button
class="btn btn-primary btn-sm"
data-bind="click: showCartDetails, css:{ disabled: cart().length < 1}"
>
Show Cart Details
</button>
<hr />
</script>
<script type="text/html" id="catalog">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i> Search
</span>
<input type="text" class="form-control" data-bind="textInput:searchTerm">
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach:catalog">
<tr data-bind="style:lineColor">
<td data-bind="text:name"></td>
<td data-bind="text:price"></td>
<td data-bind="text:stock"></td>
<td>
<button class="btn btn-primary" data-bind="click:$parent.addToCart">
<i class="glyphicon glyphicon-plus-sign"></i> Add
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<strong>Items:</strong><span data-bind="text:catalog().length"></span>
</td>
<td colspan="1">
<span data-bind="template:{name: 'cart-widget'}"></span>
</td>
</tr>
</tfoot>
</table>
</script>
<script type="text/html" id="add-to-catalog-modal">
<div class="modal fade" id="addToCatalogModal">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3>Add New Product to the Catalog</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
</div>
</div>
</div>
<div class="modal-footer">
<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
</button>
</div>
</div>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-diaglog -->
</div> <!-- /.modal -->
</script>
<script type="text/html" id="cart-widget">
Total Items: <span data-bind="text:totalItems"></span>
Price: <span data-bind="text:grandTotal"></span>
</script>
<script type="text/html" id="cart-item">
<div class="list-group-item" style="overflow: hidden">
<button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
<span>&times;</span>
</button>
<h4 class="" data-bind="text:product.name"></h4>
<div class="input-group cart-unit">
<input type="text" class="form-control" data-bind="textInput:units" readonly/>
<span class="input-group-addon">
<div class="btn-group-vertical">
<button class="btn btn-default btn-xs" data-bind="click:addUnit">
<i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button class="btn btn-default btn-xs" data-bind="click:removeUnit">
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</span>
</div>
</div>
</script>
<script type="text/html" id="cart">
<button type="button" class="close pull-right" data-bind="click:hideCartDetails">
<span>&times;</span>
</button>
<h1>Cart</h1>
<div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
<div data-bind="template: {name: 'cart-widget'}"></div>
<button class="btn btn-primary btn-sm" data-binid="click:showOrder">
Confirm Order
</button>
</script>
<script type="text/html" id="order">
<div class="col-xs-12">
<button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
Back to catalog
</button>
<button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
Buy & finish
</button>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Units</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody data-bind="foreach:cart">
<tr>
<td data-bind="text:product.name"></td>
<td data-bind="text:product.price"></td>
<td data-bind="text:units"></td>
<td data-bind="text:subtotal"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>
Total: <span data-bind="text:grandTotal"></span>
</td>
</tr>
</tfoot>
</table>
</div>
</script>
<script type="text/html" id="finish-order-modal">
<div class="modal fade" id="finishOrderModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h2>Your order has been completed!</h2>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success" data-dismiss="modal">Continue Shopping</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

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

@ -134,4 +134,26 @@ var vm = (function () {
visibleCart: visibleCart
};
})();
ko.applyBindings(vm);
var templates = [
'header',
'catalog',
'cart',
'cart-item',
'cart-widget',
'order',
'add-to-catalog-modal',
'finish-order-modal'
];
var busy = templates.length;
templates.forEach(function(tpl){
"use strict";
$.get('views/' + tpl + '.html').then(function(data) {
$('body').append(data);
busy--;
if (!busy) {
ko.applyBindings(vm);
}
})
})

76
ko-cart/views/add-to-catalog-modal.html 100644
View File

@ -0,0 +1,76 @@
<script type="text/html" id="add-to-catalog-modal">
<div class="modal fade" id="addToCatalogModal">
<div class="modal-dialog">
<div class="modal-content">
<form
class="form-horizontal"
role="form"
data-bind="with:newProduct"
>
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
>
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3>Add New Product to the Catalog</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input
type="text"
class="form-control"
placeholder="Name"
data-bind="textInput:name"
/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="text"
class="form-control"
placeholder="Price"
data-bind="textInput:price"
/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="text"
class="form-control"
placeholder="Stock"
data-bind="textInput:stock"
/>
</div>
</div>
</div>
<div class="modal-footer">
<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
</button>
</div>
</div>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-diaglog -->
</div>
<!-- /.modal -->
</script>

36
ko-cart/views/cart-item.html 100644
View File

@ -0,0 +1,36 @@
<script type="text/html" id="cart-item">
<div class="list-group-item" style="overflow: hidden">
<button
type="button"
class="close pull-right"
data-bind="click:$root.removeFromCart"
>
<span>&times;</span>
</button>
<h4 class="" data-bind="text:product.name"></h4>
<div class="input-group cart-unit">
<input
type="text"
class="form-control"
data-bind="textInput:units"
readonly
/>
<span class="input-group-addon">
<div class="btn-group-vertical">
<button
class="btn btn-default btn-xs"
data-bind="click:addUnit"
>
<i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button
class="btn btn-default btn-xs"
data-bind="click:removeUnit"
>
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</span>
</div>
</div>
</script>

4
ko-cart/views/cart-widget.html 100644
View File

@ -0,0 +1,4 @@
<script type="text/html" id="cart-widget">
Total Items: <span data-bind="text:totalItems"></span> Price:
<span data-bind="text:grandTotal"></span>
</script>

18
ko-cart/views/cart.html 100644
View File

@ -0,0 +1,18 @@
<script type="text/html" id="cart">
<button
type="button"
class="close pull-right"
data-bind="click:hideCartDetails"
>
<span>&times;</span>
</button>
<h1>Cart</h1>
<div
data-bind="template: {name: 'cart-item', foreach:cart}"
class="list-group"
></div>
<div data-bind="template: {name: 'cart-widget'}"></div>
<button class="btn btn-primary btn-sm" data-bind="click:showOrder">
Confirm Order
</button>
</script>

48
ko-cart/views/catalog.html 100644
View File

@ -0,0 +1,48 @@
<script type="text/html" id="catalog">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i> Search
</span>
<input
type="text"
class="form-control"
data-bind="textInput:searchTerm"
/>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach:catalog">
<tr data-bind="style:lineColor">
<td data-bind="text:name"></td>
<td data-bind="text:price"></td>
<td data-bind="text:stock"></td>
<td>
<button
class="btn btn-primary"
data-bind="click:$parent.addToCart"
>
<i class="glyphicon glyphicon-plus-sign"></i> Add
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<strong>Items:</strong
><span data-bind="text:catalog().length"></span>
</td>
<td colspan="1">
<span data-bind="template:{name: 'cart-widget'}"></span>
</td>
</tr>
</tfoot>
</table>
</script>

24
ko-cart/views/finish-order-modal.html 100644
View File

@ -0,0 +1,24 @@
<script type="text/html" id="finish-order-modal">
<div class="modal fade" id="finishOrderModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h2>Your order has been completed!</h2>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-success"
data-dismiss="modal"
>
Continue Shopping
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>

18
ko-cart/views/header.html 100644
View File

@ -0,0 +1,18 @@
<script type="text/html" id="header">
<h1>Catalog</h1>
<button
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#addToCatalogModal"
>
Add New Product
</button>
<button
class="btn btn-primary btn-sm"
data-bind="click: showCartDetails, css:{ disabled: cart().length < 1}"
>
Show Cart Details
</button>
<hr />
</script>

36
ko-cart/views/order.html 100644
View File

@ -0,0 +1,36 @@
<script type="text/html" id="order">
<div class="col-xs-12">
<button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
Back to catalog
</button>
<button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
Buy & finish
</button>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Units</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody data-bind="foreach:cart">
<tr>
<td data-bind="text:product.name"></td>
<td data-bind="text:product.price"></td>
<td data-bind="text:units"></td>
<td data-bind="text:subtotal"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>Total: <span data-bind="text:grandTotal"></span></td>
</tr>
</tfoot>
</table>
</div>
</script>