Beyond me as yet!!
go well
Building a shopping cart with knockout.js
Prior to joining Microsoft I worked for a large online retailer, so I know first-hand how difficult it is to produce a good shopping cart. As a user updates quantities, deletes items or changes delivery options it’s important to update the sub total, tax and shipping instructions. It’s critical that the experience reacts quickly and that nothing gets in the way of a user making the purchase.
Even when creating a simple shopping cart it is easy to end up with a bug ridden, mess of JavaScript onChange events. In the following article I’m going to let you into a little secret, a secret that removes all of the complication out of creating html that needs to respond to changes in the underlying data source. The secret is knockout.js a JavaScript Library that brings the MVVM pattern to your html applications.
For this article I’m going to be using the shopping cart example from the knockoutjs.com website. The example shows a rather straight forward cart, however, despite it’s apparent simplicity it actually performs a number of rather cool tricks that include:
- Declarative Binding – The HTML is attached to the model we create using the html attribute data-bind. This attribute was formally added to the HTML5 specification but will actually work across all browsers, even IE6.
- Automatic UI refresh – When the model changes all of the bound objects will update automagically. All of the Items that you have bound using the data-bind attribute will change in real time as other elements on the model are changed or recalculated. So when you change the QTY of an item the sub total will be updated.
- Dependency Tracking – It’s easy to set up relationships between different properties on the model. So that the sub total can be a combination of each of the different items multiplied by the QTY.
- Templating – You can use templating so that UI is generated for each item in the shopping cart. The syntax is very much like a for loop. The added benefit is that items that are templated in this way are still able to be automatically refreshed when the model changes.
To install Knockout you will need to download the files from the installation page here and add the script to the top of your page. If you have NuGet you can simply install the knockoutjs package. To do some of the more advanced templating in this example you will also require the templating plugin for jQuery and jQuery. If you used NuGet to download then knockout it will have already installed these dependencies (because NuGet is that cool).
Once you have either downloaded the JavaScript files or used NuGet you can then add the script references to the top of your page. The order is important as these files have dependencies.
No comments:
Post a Comment
Your comments, questions, thoughts or feelings will be very welcome!
go well