Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 4 USING URL ROUTINGrouting and lets me use other kinds of elements as well. Listing 4-9 shows this pattern applied to someother element types.Listing 4-9. Bridging Between URL Routing and JavaScript Events...var viewModel = {items: ko.observableArray(["Apple", "Orange", "Banana"]),selectedItem: ko.observable("Apple")};$(document).ready(function() {ko.applyBindings(viewModel);$('div.catSelectors').buttonset();hasher.initialized.add(crossroads.parse, crossroads);hasher.changed.add(crossroads.parse, crossroads);hasher.init();crossroads.addRoute("select/:item:", function(item) {if (!item) {item = "Apple";} else if (viewModel.items.indexOf(item)== -1) {viewModel.items.push(item);$('div.catSelectors').buttonset();}if (viewModel.selectedItem() != item) {viewModel.selectedItem(item);}});crossroads.addRoute("", function() {viewModel.selectedItem("Apple");})$('[data-url]').live("change click", function(e) {var target = $(e.target).attr("data-url");if (e.target.tagName == 'SELECT') {target += $(e.target).children("[selected]").val();}if (location.hash != target) {location.replace(target);}})});...90The technique here is to add a data-url attribute to the elements whose events should result in anavigation change. I use jQuery to handle the change and click events for elements that have the datawww.it-ebooks.info