How to make button behave differently depending selected listview item?

Question

I am creating a jQuery Mobile site and am struggling with some fundamental concepts. For example, I have a page header with navigation buttons such as "display on map". Underneath it, I have a collapsible listview with items. When a user clicks or expands a listview item, how do I make it so that when they click on the navigation button to display on map, it will use the selected item's ID to update the map. Basically, the href of one button depends on what is currently selected. How should I handle this? Should I use a 3rd party library for this or a different approach?

Answer 1

Let's say you have an object that handles the map display:

var Map = new ( function() {
   this.selectedItem = null;
   this.changeSelectedItem = function( itemID ) {
      this.selectedItem = itemID;
   }
   this.displaySelectedItem = function() {
      // display item here using this.selectedItem

   }
} )();

If you had a list item like this:

<li class="listItems" data-id="1">Some Item</li>

Then you could attach a handler like this:

$( '.listItems' ).click( function() {
   var itemID = $( this ).data( 'id' );
   Map.changeSelectedItem.call( Map, itemID );
} );

In this way you attached the UI event handler to the Map object's changeSelectedItem method. You can similarly attach the displaySelectedItem method to a UI handler. Does this make sense?