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

Prettified all html and js

chap2
Jason Zhu 2022-04-21 00:34:04 +10:00
parent 1b13bd0e0c
commit 708353b7f8
2 changed files with 180 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ko-cart/index.html
View File

@ -1,33 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>KO Shopping Cart</title> <title>KO Shopping Cart</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<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"> <div class="container-fluid">
<div class="row" data-bind="if: visibleCatalog"> <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 class="col-xs-6 well hidden" data-bind="if: visibleCart"> data-bind="template:{name:'header'}"
<div class="well" data-bind="template:{name:'cart'}"></div> ></div>
</div> <div
</div> class="col-xs-6"
<div class="row" data-bind="if: visibleCart"> data-bind="template:{name:'catalog'}"
<div data-bind="template:{name:'order'}"></div> ></div>
</div> <div class="col-xs-6 well hidden" data-bind="if: visibleCart">
<div data-bind="template: {name:'add-to-catalog-modal'}"></div> <div class="well" data-bind="template:{name:'cart'}"></div>
<div data-bind="template: {name:'finish-order-modal'}"></div> </div>
</div> </div>
<div class="row" data-bind="if: visibleCart">
<div data-bind="template:{name:'order'}"></div>
</div>
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
<div data-bind="template: {name:'finish-order-modal'}"></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>
<script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script> <script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<!-- app --> <!-- app -->
<script type="text/javascript" src="js/models/Product.js"></script> <script type="text/javascript" src="js/models/Product.js"></script>
<script type="text/javascript" src="js/models/CartProduct.js"></script> <script type="text/javascript" src="js/models/CartProduct.js"></script>
<script type="text/javascript" src="js/viewmodel.js"></script> <script type="text/javascript" src="js/viewmodel.js"></script>
</body> </body>
</html> </html>

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

@ -1,160 +1,165 @@
"use strict"; "use strict";
var vm = (function () { var vm = (function () {
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),
Product(3, "Shirt", 15.0, 20), Product(3, "Shirt", 15.0, 20),
Product(4, "Shorts", 5.0, 10), Product(4, "Shorts", 5.0, 10),
]); ]);
var newProduct = Product("", "", "", ""); var newProduct = Product("", "", "", "");
var clearNewProduct = function () { var clearNewProduct = function () {
newProduct.name(""); newProduct.name("");
newProduct.price(""); newProduct.price("");
newProduct.stock(""); newProduct.stock("");
}; };
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(
catalog.push(product); id,
clearNewProduct(); context.name(),
}; context.price(),
context.stock()
);
catalog.push(product);
clearNewProduct();
};
var searchTerm = ko.observable(""); var searchTerm = ko.observable("");
var filteredCatalog = ko.computed(function () { var filteredCatalog = ko.computed(function () {
// if catalog is empty return empty array // if catalog is empty return empty array
if (!catalog()) { if (!catalog()) {
return []; return [];
} }
var filter = searchTerm().toLowerCase(); var filter = searchTerm().toLowerCase();
// if filter is empty return all the catalog // if filter is empty return all the catalog
if (!filter) { if (!filter) {
return catalog(); return catalog();
} }
//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;
}); var cart = ko.observableArray([]);
var showCartDetails = function () {
var cart = ko.observableArray([]); if (cart().length > 0) {
var showCartDetails = function () { visibleCart(true);
if (cart().length > 0) { }
visibleCart(true); };
} var addToCart = function (data) {
}; var item = null;
var addToCart = function(data) { var tmpCart = cart();
var item = null; var n = tmpCart.length;
var tmpCart = cart(); while (n--) {
var n = tmpCart.length; if (tmpCart[n].product.id() === data.id()) {
while(n--) { item = tmpCart[n];
if (tmpCart[n].product.id() === data.id()) { }
item = tmpCart[n]; }
} if (item) {
} item.addUnit();
if (item) { } else {
item.addUnit(); item = new CartProduct(data, 0);
} else { item.addUnit();
item = new CartProduct(data, 0); tmpCart.push(item);
item.addUnit(); }
tmpCart.push(item); cart(tmpCart);
} };
cart(tmpCart);
}; // The cart-widget template
var totalItems = ko.computed(function () {
// The cart-widget template var tmpCart = cart();
var totalItems = ko.computed(function() { var total = 0;
var tmpCart = cart(); tmpCart.forEach(function (item) {
var total = 0; total += parseInt(item.units(), 10);
tmpCart.forEach(function(item) { });
total += parseInt(item.units(), 10); return total;
}); });
return total; var grandTotal = ko.computed(function () {
}) var tmpCart = cart();
var grandTotal = ko.computed(function() { var total = 0;
var tmpCart = cart(); tmpCart.forEach(function (item) {
var total = 0; total += item.units() * item.product.price();
tmpCart.forEach(function(item) { });
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) {
var units = data.units(); var units = data.units();
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 () {
visibleCart(false); visibleCart(false);
}; };
var showOrder = function () { var showOrder = function () {
visibleCatalog(false); visibleCatalog(false);
} };
// The order template // The order template
var showCatalog = function () { var showCatalog = function () {
visibleCatalog(true); visibleCatalog(true);
}; };
var finishOrder = function() { var finishOrder = function () {
cart([]); cart([]);
hideCartDetails(); hideCartDetails();
showCatalog(); showCatalog();
$("#finishOrderModal").modal('show'); $("#finishOrderModal").modal("show");
} };
var visibleCatalog = ko.observable(true); var visibleCatalog = ko.observable(true);
var visibleCart = ko.observable(false); var visibleCart = ko.observable(false);
return { return {
// first chapter // first chapter
searchTerm: searchTerm, searchTerm: searchTerm,
catalog: filteredCatalog, catalog: filteredCatalog,
newProduct: newProduct, newProduct: newProduct,
addProduct: addProduct, addProduct: addProduct,
// second chapter // second chapter
cart: cart, cart: cart,
showCartDetails: showCartDetails, showCartDetails: showCartDetails,
addToCart: addToCart, 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, visibleCatalog: visibleCatalog,
visibleCart: visibleCart visibleCart: visibleCart,
}; };
})(); })();
var templates = [ var templates = [
'header', "header",
'catalog', "catalog",
'cart', "cart",
'cart-item', "cart-item",
'cart-widget', "cart-widget",
'order', "order",
'add-to-catalog-modal', "add-to-catalog-modal",
'finish-order-modal' "finish-order-modal",
]; ];
var busy = templates.length; var busy = templates.length;
templates.forEach(function(tpl){ templates.forEach(function (tpl) {
"use strict"; "use strict";
$.get('views/' + tpl + '.html').then(function(data) { $.get("views/" + tpl + ".html").then(function (data) {
$('body').append(data); $("body").append(data);
busy--; busy--;
if (!busy) { if (!busy) {
ko.applyBindings(vm); ko.applyBindings(vm);
} }
}) });
}) });