Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 4 USING URL ROUTINGdefinition of this binding, which I have placed in a file called utils.js (which you can see imported in ascript element in Listing 4-1). There is no requirement to use an external file; I have used one because Iintend to employ this binding again when I add routing to the CheeseLux example later in the chapter.Listing 4-2. Defining a Custom Bindingko.bindingHandlers.fadeVisible = {}init: function(element, accessor) {$(element)[accessor() ? "show" : "hide"]();},update: function(element, accessor) {if (accessor() && $(element).is(":hidden")) {var siblings = $(element).siblings(":visible");if (siblings.length) {siblings.fadeOut("fast", function() {$(element).fadeIn("fast");})} else {$(element).fadeIn("fast");}}}Creating a custom binding is as simple as adding a new property to the ko.bindinghandlers object;the name of the property will be the name of the new binding. The value of the property is an object withtwo methods: init and update. The init method is called when ko.applyBindings is called, and theupdate method is called when observable data items that the binding depends on change.The arguments to both methods are the element to which the binding has been applied to and anaccessor object that provides access to the binding argument. The binding argument is whatever followsthe binding name:data-bind="fadeVisible: $data == viewModel.selectedItem()"I have used $data in my binding argument. When using a foreach binding, $data refers to thecurrent item in the array. I check this value against the selectedItem observable data item in the viewmodel. I have to refer to the observable through the global variable because it is not within the context ofthe foreach binding, and this means I need to treat the observable like a function to get the value. WhenKO calls the init or update method of my custom binding, the expression in the binding argument isresolved, and the result of calling accessor() is true.In my custom binding, the init method uses jQuery to show or hide the element to which thebinding has been applied based on the accessor value. This means that only the elements thatcorrespond to the selectedItem observable are displayed.The update method works differently. I use jQuery effects to animate the transition from one set ofelements to another. If the update method is being called for the elements that should be displayed, Iselect the elements that are presently visible and call the fadeOut method. This causes the elements togradually become transparent and then invisible; once this has happened, I then use fadeIn to make therequired elements visible. The result is a smooth transition from one set of elements to another.80www.it-ebooks.info