SportsStore Knockoutified

Recently I took couple of weeks off from work because we were having a baby.  So as any good father/developer would do I took that opportunity to do something that I’ve always wanted to do but never really had the time for – learn a new technology, oh and help my wife take care of the newborn, which I don’t think I did a very good job.

I wanted to learn more about KnockoutJs, I’ve seen the demos and went through the interactive samples on there site before, and I really liked it.  So I went googling for more realistic fully finished examples, because I learn better when I go through it step by step from start to finish.  But all I found was small bits and pieces of samples that shows you how to do a particular thing and that was about it.  So here is my first take on building a fully functioning example using the SportsStore application to be knockoutified.

So the application if you’re not familiar with, is a basic ecommerce application where users can purchase products by adding it to their cart and going through the checkout process and of course administrators can do CRUD operations to those products.  I can’t possibly post all of my code here on my blog so I put the code on GitHub if you’re interested to see it working on your machine (https://github.com/tenzinkabsang/sportsstoreknockoutified).

Here is the home page, and all I did here was add an additional button as well as cart summary at the top both using Knockout

Home Page

home page script

Here is the cart view where I also added functionality to change the item quantity and the cart total will be updated accordingly, the “Remove” button is also using knockout:

Cart

cart html

 

 

cart script

And finally here is the admin page where they can manage their products. The create/edit product page is all done with knockout and does not hit the server until you hit Save.  I created two observables “isEditing” and “isCreating” to determine whether an existing product is being edited or a new product is being created, and based on the status of these two observables I manipulate the Edit view accordingly.

adminHome

edit

isEditing html

isEditing script

Like I said before, I am currently learning KnockoutJs and I am pretty sure that I might be doing certain things the wrong way but – hey this is all a learning process and as I become more familiar with Knockout I will keep improving this code base.  Hope this was somewhat helpful – thanks!