Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 3 ADDING A VIEW MODELcheeseModel.specials = {category: "Special Offers",discount: 3,ids: ["stilton", "tomme"],items: []};The discount property specifies the dollar discount I want to apply to the special offers, and the idsproperty contains an array of the IDs of products that will be special offers.The specials.items array is empty when I first define it. To populate the array, I enumerate theproducts array to find those products that are in the specials.ids array, like this:mapProducts(function(item) {if ($.inArray(item.id, cheeseModel.specials.ids) > -1) {item.price -= cheeseModel.specials.discount;cheeseModel.specials.items.push(item);}item.quantity = ko.observable(0);});I use the inArray method to determine whether the current item in the iteration is one of those thatwill be included as a special offer. The inArray method is another jQuery utility, and it returns the indexof an item if it is contained within an array and -1 if it is not. This is a quick and easy way for me to checkto see whether the current item is one that I am interested in as a special offer.If an item is on the specials list, then I reduce the value of the price property by the discountamount and use the push method to insert the item into the specials.items array.item.price -= cheeseModel.specials.discount;cheeseModel.specials.items.push(item);After I have iterated through the items in the view model, the specials.item array contains acomplete set of the products that are to be discounted, and, along the way, I have reduced each of theirprices.In this example, I have made the quantity property into an observable data item:item.quantity = ko.observable(0);This is important because I am going to display multiple input elements for the special offers: oneelement in the original cheese category and another in a new Special Offers category that I explain inthe next section. By using an observable data item and bidirectional bindings on the input elements, Ican easily make sure that the quantities entered for a cheese are consistently displayed, irrespective ofwhich input element is used.Generating the ContentAll that remains now is to generate the content from the view model. I want to generate the same set ofelements for the special offers as for the regular categories, so I have used the KO template feature, whichallows me to generate the same set of elements at multiple points in the document. Here is the templatefrom the listing:61www.it-ebooks.info