Proper way to use jQuery Mobile for data-driven apps?

Question

I have started using jQuery Mobile and I am trying to understand how I should handle clicks and passing data around. For example, I have a listview of items. When tapped, I want to take the user to another page within the app that is generated based on the item ID that was clicked. Would I store the data ID in a custom data-* attribute and bind a click event to it so I can send them to the other page? Or is there a native approach or a 3rd party library I should be using? I am using a REST service, but the underlying backend is an ASP.NET MVC application if that makes a difference. Any help or advice would be greatly appreciated.

Answer 1

I have used Sencha Touch not jQuery Mobile. But Sencha Touch provides good support for routing, which is the name of the problem you are trying to solve. You should consider carefully whether you wish to do routing client-side or server-side. Sencha Touch supports client-side, which is becoming the more popular approach because it lends itself to good offline behavior. jQuery Mobile has perhaps imperfect routing support from what I have read, but other libraries such as Backbone can fill the gap . See also Spine , Thorax. Spine was specifically recommended to me for mobile routing. This site proposes a patch to jQuery to improve routing.

Answer 2

JQM does this for you, just put links in your listview LI elements and JQM will render them with arrows, and pull the contents in via AJAX.

<ul data-role="listview">
  <li><a href="/page?item=1">Item 1</a></li>
  <li><a href="/page?item=2">Item 2</a></li>
</ul>

The URL /page?item=1 should then generate the page contents for that item:

<div data-role="page">
    ...
</div>