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

Compare commits

base: Jason:e078b83455ce1dc7f625bd14ca77ee98bbfd869b
Branches Tags
Jason:chap3
Jason:chap2
Jason:master
..
compare: Jason:e52b7bb9787a8e733b81283b7cc2708ca464373c
Branches Tags
Jason:chap3
Jason:chap2
Jason:master

No commits in common. "e078b83455ce1dc7f625bd14ca77ee98bbfd869b" and "e52b7bb9787a8e733b81283b7cc2708ca464373c" have entirely different histories.
e078b83455 ... e52b7bb978

2 changed files with 17 additions and 192 deletions
Show Stats Expand all files Collapse all files

153
ko-cart/index.html
View File

@ -10,9 +10,17 @@
<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 id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div> <div
id="cartContainer"
class="col-xs-6 well hidden"
data-bind="template:{name:'cart'}"
></div>
</div> </div>
<div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></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>
@ -76,141 +84,12 @@
</tfoot> </tfoot>
</table> </table>
</script> </script>
<script type="text/html" id="add-to-catalog-modal"> <script type="text/html" id="add-to-catalog-modal"></script>
<div class="modal fade" id="addToCatalogModal"> <script type="text/html" id="cart-widget"></script>
<div class="modal-dialog"> <script type="text/html" id="cart-item"></script>
<div class="modal-content"> <script type="text/html" id="cart"></script>
<form class="form-horizontal" role="form" data-bind="with:newProduct"> <script type="text/html" id="order"></script>
<div class="modal-header"> <script type="text/html" id="finish-order-modal"></script>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3>Add New Product to the Catalog</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
<i class="glyphicon glyphicon-plus-sign"></i> Add Product
</button>
</div>
</div>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-diaglog -->
</div> <!-- /.modal -->
</script>
<script type="text/html" id="cart-widget">
Total Items: <span data-bind="text:totalItems"></span>
Price: <span data-bind="text:grandTotal"></span>
</script>
<script type="text/html" id="cart-item">
<div class="list-group-item" style="overflow: hidden">
<button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
<span>&times;</span>
</button>
<h4 class="" data-bind="text:product.name"></h4>
<div class="input-group cart-unit">
<input type="text" class="form-control" data-bind="textInput:units" readonly/>
<span class="input-group-addon">
<div class="btn-group-vertical">
<button class="btn btn-default btn-xs" data-bind="click:addUnit">
<i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button class="btn btn-default btn-xs" data-bind="click:removeUnit">
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</span>
</div>
</div>
</script>
<script type="text/html" id="cart">
<button type="button" class="close pull-right" data-bind="click:hideCartDetails">
<span>&times;</span>
</button>
<h1>Cart</h1>
<div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
<div data-bind="template: {name: 'cart-widget'}"></div>
<button class="btn btn-primary btn-sm" data-binid="click:showOrder">
Confirm Order
</button>
</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">
<div class="modal fade" id="finishOrderModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h2>Your order has been completed!</h2>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success" data-dismiss="modal">Continue Shopping</button>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
<script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>

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

@ -65,53 +65,6 @@ var vm = (function () {
} }
cart(tmpCart); cart(tmpCart);
}; };
// The cart-widget template
var totalItems = ko.computed(function() {
var tmpCart = cart();
var total = 0;
tmpCart.forEach(function(item) {
total += parseInt(item.units(), 10);
});
return total;
})
var grandTotal = ko.computed(function() {
var tmpCart = cart();
var total = 0;
tmpCart.forEach(function(item) {
total += (item.units() * item.product.price());
});
return total;
})
// The cart-item template
var removeFromCart = function (data) {
var units = data.units();
var stock = data.product.stock();
data.product.stock(units + stock);
cart.remove(data);
}
// The cart template
var hideCartDetails = function() {
$('#cartContainer').addClass("hidden");
};
var showOrder = function () {
$('#catalogContainer').addClass("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
@ -121,14 +74,7 @@ var vm = (function () {
addProduct: addProduct, addProduct: addProduct,
// second chapter // second chapter
cart: cart, cart: cart,
showCartDetails: showCartDetails, showCartDetails: showCartDetails
totalItems: totalItems,
grandTotal: grandTotal,
removeFromCart: removeFromCart,
hideCartDetails: hideCartDetails,
showOrder: showOrder,
showCatalog: showCatalog,
finishOrder: finishOrder
}; };
})(); })();
ko.applyBindings(vm); ko.applyBindings(vm);