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>
<body>
<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-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 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:'finish-order-modal'}"></div>
</div>

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

@ -44,7 +44,7 @@ var vm = (function () {
var cart = ko.observableArray([]);
var showCartDetails = function () {
if (cart().length > 0) {
$("#cartContainer").removeClass("hidden");
visibleCart(true);
}
};
var addToCart = function(data) {
@ -94,17 +94,15 @@ var vm = (function () {
// The cart template
var hideCartDetails = function() {
$('#cartContainer').addClass("hidden");
visibleCart(false);
};
var showOrder = function () {
$('#catalogContainer').addClass("hidden");
$('#orderContainer').removeClass("hidden");
visibleCatalog(false);
}
// The order template
var showCatalog = function () {
$("#catalogContainer").removeClass("hidden");
$("$orderContainer").addClass("hidden");
visibleCatalog(true);
};
var finishOrder = function() {
cart([]);
@ -113,6 +111,9 @@ var vm = (function () {
$("#finishOrderModal").modal('show');
}
var visibleCatalog = ko.observable(true);
var visibleCart = ko.observable(false);
return {
// first chapter
searchTerm: searchTerm,
@ -128,7 +129,9 @@ var vm = (function () {
hideCartDetails: hideCartDetails,
showOrder: showOrder,
showCatalog: showCatalog,
finishOrder: finishOrder
finishOrder: finishOrder,
visibleCatalog: visibleCatalog,
visibleCart: visibleCart
};
})();
ko.applyBindings(vm);