How to deliver data to other page in Framework7?

Question

How to deliver the data to the detail page ?

You see the below demo I write, I am studying Framework7, but I am puzzle about to deliver data to the detail page.

Such as I click the first item, I want to deliver the index = 0 to the detail page, if I click the second item, I want to deliver index = 1 to the detail page.

My code is below:

<ul>
  <li class="item-content">
     <div class="item-media"><a href="about.html"><img src="http://up.qqjia.com/z/25/tu32695_9.jpg" width="44"></a></div>
     <div class="item-inner">
     <div class="item-title-row">
          <div class="item-title">Daniel</div>
     </div>
     <div class="item-subtitle">CEO</div>
     </div>

  </li>
  ...
</ul>

You see,I goto the about page is use <a> label, so, How can I deliver the index number, and so I can dynamic set the about page's data.

If there get a demo, maybe that explain more detail.

Answer 1

My friend, please use Template7, Framework7 already support what you are asking for, check "Pass Custom Context" section in Template7 documentation page:

http://framework7.io/docs/template7-pages.html#pass-custom-context

It is very simple and the documentation covers all the scenarios, more info and demos here:

http://idangero.us/template7/

EDIT

As some links are dead, referring to new links:

http://framework7.io/docs/template7.html

Answer 2

you can use localstorage concept. When the user click the particular list item like below save localstorage :

localStorage.setItem("listitem", "1");  

get localstorage :

alert(localStorage.listeitem)

Answer 3

I opted for an easier way.

Set the data attribute on the 'a' tag:

<a href="#nextpage" data-myfieldname="myfieldvalue">

Then retrieve the data from the Javascript's click event handler:

mydata = $(this).data('myfieldname');