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');
  }
})

Answer 2

I'm not an Appframework expert, but here's the simplest solution I came up with:

Since you're on a single-page app, you can store the currently selected item in a global data structure:

<script type="text/javascript">
  var dialogData = {
    "currentItemNo": -1,
    // possibly other dialog data
  };
</script>

Then in your HTML you can set it like this:

<li>
  <a href="#detailpanel" onclick="dialogData.currentItemNo=3">Item 3</a>
<li>

and access it when the user navigates to the page:

<script type="text/javascript">
  $("#detailpanel").bind("loadpanel", function () {
    console.log("You clicked " + dialogData.currentItemNo);
  });
</script>

Note that both the click handler and AF's anchor handler get called (the click handler first).

In case your list is generated from a template you might want to use a more elegant solution to access the current item number:

<li>
  <a href="#detailpanel" data-itemno="3" onclick="dialogData.currentItemNo=this.dataset.itemno">Item 3</a>
<li>