Intel appframework ui: how to pass data in a simple list-detail app

Question

I try to learn the Intel Appframework UI.

I want to build a simple offline app with just two panels. One panel contains a list with items (links), the second panel should display details to the selected item. The details in the second panel should be filled with javascript.

How do I pass data (for example a numeric item_id) to the second panel, so that my javascript can access it and fill it into the details page?

Can I use a part of the url of the links in the list, like this:

<li>
   <a href="#detailpanel?item=3"> Item 3 </a>
</li>

If yes, how do I get the information back in the details page? Or do I need to use javacript-links?

Answer 1

In the intel appframework forum is an answer to my question: https://forums.html5dev-software.intel.com/viewtopic.php?f=26&t=4478

So the solution is to use urls like like this:

<li>
    <a href="#detailpanel/3"> Item 3 </a>
</li>

We than attach a handler to the target panel, which gets the url from the browser. The framework has set the url to the new value when the callback is called:

$("#detailpanel").bind("loadpanel",function(evt){
  //url would be #detailpanel/N
  params = document.location.hash.split('/');
  if(params.length > 1){
    showDetails(params[1]);
  }
  else {
    console.log('on_load_detailpanel: detailnr missing');
  }
})