Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 3 ADDING A VIEW MODEL...I have used the ifnot binding on the div element that contains the placeholder text. KO defines apair of bindings, if and ifnot, that are similar to the visible binding but that add and remove elementsto the DOM, rather than simply hiding them from view. The if binding shows its elements when thespecified view model property is true-like and hides them if it is false-like. The ifnot binding is inverted;it shows its elements when the property is true-like.By specifying the ifnot binding with the total property, I ensure that my placeholder element isshown only when total is zero, which happens when all of the subtotal values are zero, which happenswhen all of the quantity values are zero. Once again, I am relying on KO’s ability to manage thedependencies between observable data items to get the effect I require.I want the table element to be invisible when the placeholder is showing, so I have used the visiblebinding.I could have used the if binding, but doing so would have caused a problem. The binding to thetotal property means that the table will not be shown initially, and with the if binding, the elementwould have been removed from the DOM. This means that the a elements would also not be presentwhen I try to select them to set up the remove buttons. The visible binding leaves the elements in thedocument for jQuery to find but hides them from the user.You might wonder why I don’t move the jQuery selection so that it is performed before the call toko.applyBindings. The reason is that the a elements I want to select with jQuery are contained in the KOtemplate, which isn’t used to create elements until the applyBindings method is called. There is no goodway around this, and so the visible binding is required.The only other change to the HTML elements is the addition of an input element whose type isreset. This element is outside of the form element, so I will have to handle the click event to removeitems from the basket. Listing 3-11 shows the corresponding changes to the script element.Listing 3-11. Enhancing the Script to Finish the Example...// ...code removed for brevity... //$(document).ready(function() {$('#buttonDiv input').button().css("font-family", "Yanone").click(function() {73www.it-ebooks.info