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

chap02 -> Handling templates with if and ifnot bindings

chap2
Jason Zhu 2022-04-20 23:44:00 +10:00
parent e078b83455
commit 0e06cb0806
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ko-cart/index.html
View File

@ -7,12 +7,16 @@
</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 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" data-bind="template:{name:'catalog'}"></div>
<div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></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 hidden" id="ifnot: visibleCatalog">
<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>

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

@ -44,7 +44,7 @@ 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) {
@ -94,17 +94,15 @@ var vm = (function () {
// 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([]);
@ -113,6 +111,9 @@ var vm = (function () {
$("#finishOrderModal").modal('show'); $("#finishOrderModal").modal('show');
} }
var visibleCatalog = ko.observable(true);
var visibleCart = ko.observable(false);
return { return {
// first chapter // first chapter
searchTerm: searchTerm, searchTerm: searchTerm,
@ -128,7 +129,9 @@ var vm = (function () {
hideCartDetails: hideCartDetails, hideCartDetails: hideCartDetails,
showOrder: showOrder, showOrder: showOrder,
showCatalog: showCatalog, showCatalog: showCatalog,
finishOrder: finishOrder finishOrder: finishOrder,
visibleCatalog: visibleCatalog,
visibleCart: visibleCart
}; };
})(); })();
ko.applyBindings(vm); ko.applyBindings(vm);