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

Compare commits

base: Jason:e078b83455ce1dc7f625bd14ca77ee98bbfd869b
Branches Tags
Jason:chap3
Jason:chap2
Jason:master
..
compare: Jason:fe598fc1327ef0155eb31361dd447f5368e35291
Branches Tags
Jason:chap3
Jason:chap2
Jason:master

5 Commits
e078b83455 ... fe598fc132

Author SHA1 Message Date
Jason Zhu fe598fc132 Did a little bit of change 2022-04-21 00:48:24 +10:00
Jason Zhu 708353b7f8 Prettified all html and js 2022-04-21 00:34:04 +10:00
Jason Zhu 1b13bd0e0c Chap02 -> Managing template with jQuery (Bug fixing) 2022-04-21 00:32:44 +10:00
Jason Zhu 9b7f2fefbe Chap02 -> Managing templates with jQuery 2022-04-20 23:53:23 +10:00
Jason Zhu 0e06cb0806 chap02 -> Handling templates with if and ifnot bindings 2022-04-20 23:44:00 +10:00
10 changed files with 449 additions and 338 deletions
Show Stats Expand all files Collapse all files

214
ko-cart/index.html
View File

@ -7,210 +7,26 @@
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row" id="catalogContainer"> <div class="row" data-bind="if: visibleCatalog">
<div class="col-xs-12" data-bind="template:{name:'header'}"></div> <div
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div> class="col-xs-12"
<div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div> data-bind="template:{name:'header'}"
></div>
<div
class="col-xs-6"
data-bind="template:{name:'catalog'}"
></div>
<div class="col-xs-6 well hidden" data-bind="if: visibleCart">
<div class="well" data-bind="template:{name:'cart'}"></div>
</div>
</div>
<div class="row" data-bind="if: visibleCart">
<div data-bind="template:{name:'order'}"></div>
</div> </div>
<div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></div>
<div data-bind="template: {name:'add-to-catalog-modal'}"></div> <div data-bind="template: {name:'add-to-catalog-modal'}"></div>
<div data-bind="template: {name:'finish-order-modal'}"></div> <div data-bind="template: {name:'finish-order-modal'}"></div>
</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 --> <!-- 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>
<script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>

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

@ -1,5 +1,9 @@
"use strict";
var vm = (function () { var vm = (function () {
"use strict";
var visibleCatalog = ko.observable(true);
var visibleCart = ko.observable(false);
var catalog = ko.observableArray([ var catalog = ko.observableArray([
Product(1, "T-Shirt", 10.0, 20), Product(1, "T-Shirt", 10.0, 20),
Product(2, "Trousers", 20.0, 10), Product(2, "Trousers", 20.0, 10),
@ -17,9 +21,16 @@ var vm = (function () {
var addProduct = function (context) { var addProduct = function (context) {
var id = new Date().valueOf(); // random id from time var id = new Date().valueOf(); // random id from time
var product = Product(id, context.name(), context.price(), context.stock()); var product = Product(
id,
context.name(),
context.price(),
context.stock()
);
catalog.push(product); catalog.push(product);
clearNewProduct(); clearNewProduct();
$('#addToCatalogModal').modal('hide');
}; };
var searchTerm = ko.observable(""); var searchTerm = ko.observable("");
@ -36,7 +47,7 @@ var vm = (function () {
//filter data //filter data
var filtered = ko.utils.arrayFilter(catalog(), function (item) { var filtered = ko.utils.arrayFilter(catalog(), function (item) {
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase(); var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
return (strProp.indexOf(filter) > -1); return strProp.indexOf(filter) > -1;
}); });
return filtered; return filtered;
}); });
@ -44,14 +55,14 @@ var vm = (function () {
var cart = ko.observableArray([]); var cart = ko.observableArray([]);
var showCartDetails = function () { var showCartDetails = function () {
if (cart().length > 0) { if (cart().length > 0) {
$("#cartContainer").removeClass("hidden"); visibleCart(true);
} }
}; };
var addToCart = function(data) { var addToCart = function (data) {
var item = null; var item = null;
var tmpCart = cart(); var tmpCart = cart();
var n = tmpCart.length; var n = tmpCart.length;
while(n--) { while (n--) {
if (tmpCart[n].product.id() === data.id()) { if (tmpCart[n].product.id() === data.id()) {
item = tmpCart[n]; item = tmpCart[n];
} }
@ -67,22 +78,22 @@ var vm = (function () {
}; };
// The cart-widget template // The cart-widget template
var totalItems = ko.computed(function() { var totalItems = ko.computed(function () {
var tmpCart = cart(); var tmpCart = cart();
var total = 0; var total = 0;
tmpCart.forEach(function(item) { tmpCart.forEach(function (item) {
total += parseInt(item.units(), 10); total += parseInt(item.units(), 10);
}); });
return total; return total;
}) });
var grandTotal = ko.computed(function() { var grandTotal = ko.computed(function () {
var tmpCart = cart(); var tmpCart = cart();
var total = 0; var total = 0;
tmpCart.forEach(function(item) { tmpCart.forEach(function (item) {
total += (item.units() * item.product.price()); total += item.units() * item.product.price();
}); });
return total; return total;
}) });
// The cart-item template // The cart-item template
var removeFromCart = function (data) { var removeFromCart = function (data) {
@ -90,28 +101,27 @@ var vm = (function () {
var stock = data.product.stock(); var stock = data.product.stock();
data.product.stock(units + stock); data.product.stock(units + stock);
cart.remove(data); cart.remove(data);
} };
// The cart template // The cart template
var hideCartDetails = function() { var hideCartDetails = function () {
$('#cartContainer').addClass("hidden"); visibleCart(false);
}; };
var showOrder = function () { var showOrder = function () {
$('#catalogContainer').addClass("hidden"); visibleCatalog(false);
$('#orderContainer').removeClass("hidden"); };
}
// The order template // The order template
var showCatalog = function () { var showCatalog = function () {
$("#catalogContainer").removeClass("hidden"); visibleCatalog(true);
$("$orderContainer").addClass("hidden");
}; };
var finishOrder = function() { var finishOrder = function () {
cart([]); cart([]);
hideCartDetails(); hideCartDetails();
showCatalog(); showCatalog();
$("#finishOrderModal").modal('show'); $("#finishOrderModal").modal("show");
} };
return { return {
// first chapter // first chapter
@ -122,13 +132,38 @@ var vm = (function () {
// second chapter // second chapter
cart: cart, cart: cart,
showCartDetails: showCartDetails, showCartDetails: showCartDetails,
addToCart: addToCart,
totalItems: totalItems, totalItems: totalItems,
grandTotal: grandTotal, grandTotal: grandTotal,
removeFromCart: removeFromCart, removeFromCart: removeFromCart,
hideCartDetails: hideCartDetails, hideCartDetails: hideCartDetails,
showOrder: showOrder, showOrder: showOrder,
showCatalog: showCatalog, showCatalog: showCatalog,
finishOrder: finishOrder finishOrder: finishOrder,
visibleCatalog: visibleCatalog,
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>