How to access data attributes in Framework7 Preprocess

I am loading dynamic pages with F7 preprocessors and T7. I am having some difficulties to access product ID stored in data attribute. The thing is that I want when the user clicks a product in the product catalog; the detail page loads with details of the clicked product. But whenever I am trying this I am getting undefined for var id. here is my code:

{{#each this}}
       <div class="content-block"><!--Block Content-->
         <div class="row"> <!--Block Content row-->
               <div class="col-25">
                  <a href="show.html" class="link" data-id={{id}}>
               <div class="item-media"><img src="{{product_image}}" width="100" height="100"></div>
                  <div class="chip"> 
             <div class="chip-label">KES.{{price}}</div> 
               <div class="row">
                  <div class="col-50">
                     <a href="#" class="button button-small button-fill color-blue">Add to Cart</a></div> 

                   <div class="col-50">

                     <a href="#" class="button button-small button-fill color-gray">Add to Wishlist</a></div> 
                        </div><!--End of block content row-->

       </div> <!--End of block content-->

 case 'show.html':
         var id = $$(this).attr('data-id');
//alert(id)   returns undefined  

         //Fetch product categories and display them in list box
         var serverUrl = rootUrl+'products/'+id;
    url: serverUrl,
    dataType: "json",
    success: function (data, textStatus, jqXHR) {

   var compiled = Template7.compile(content);

    error: function (jqXHR, textStatus, errorThrown) {
        alert("ERROR: " + errorThrown)



All data is being retrieved from the server. Please assist me.