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

10
ko-cart/index.html
View File

@ -8,8 +8,14 @@
<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"
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="col-xs-6 well hidden" data-bind="if: visibleCart">
<div class="well" data-bind="template:{name:'cart'}"></div> <div class="well" data-bind="template:{name:'cart'}"></div>
</div> </div>

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

@ -17,7 +17,12 @@ 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();
}; };
@ -36,7 +41,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;
}); });
@ -74,15 +79,15 @@ var vm = (function () {
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,7 +95,7 @@ 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 () {
@ -98,7 +103,7 @@ var vm = (function () {
}; };
var showOrder = function () { var showOrder = function () {
visibleCatalog(false); visibleCatalog(false);
} };
// The order template // The order template
var showCatalog = function () { var showCatalog = function () {
@ -108,8 +113,8 @@ var vm = (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);
@ -132,29 +137,29 @@ var vm = (function () {
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);
} }
}) });
}) });