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

chap02 -> Creating templates -> The order template

Browse Source
This commit is contained in:
Jason Zhu 2022-04-20 22:33:50 +10:00
parent 7256b15da7
commit 93dae838eb
2 changed files with 55 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ko-cart/index.html
View File

@ -10,17 +10,9 @@
<div class="row" id="catalogContainer"> <div class="row" id="catalogContainer">
<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 <div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div>
id="cartContainer"
class="col-xs-6 well hidden"
data-bind="template:{name:'cart'}"
></div>
</div> </div>
<div <div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></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>
@ -163,7 +155,44 @@
Confirm Order Confirm Order
</button> </button>
</script> </script>
<script type="text/html" id="order"></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"></script> <script type="text/html" id="finish-order-modal"></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>

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

@ -101,6 +101,18 @@ var vm = (function () {
$('#orderContainer').removeClass("hidden"); $('#orderContainer').removeClass("hidden");
} }
// The order template
var showCatalog = function () {
$("#catalogContainer").removeClass("hidden");
$("$orderContainer").addClass("hidden");
};
var finishOrder = function() {
cart([]);
hideCartDetails();
showCatalog();
$("#finishOrderModal").modal('show');
}
return { return {
// first chapter // first chapter
searchTerm: searchTerm, searchTerm: searchTerm,
@ -114,7 +126,9 @@ var vm = (function () {
grandTotal: grandTotal, grandTotal: grandTotal,
removeFromCart: removeFromCart, removeFromCart: removeFromCart,
hideCartDetails: hideCartDetails, hideCartDetails: hideCartDetails,
showOrder: showOrder showOrder: showOrder,
showCatalog: showCatalog,
finishOrder: finishOrder
}; };
})(); })();
ko.applyBindings(vm); ko.applyBindings(vm);