framework7

Open full view…

How to access data attributes in Framework7 Preprocess

ronaldwafula
Tue, 23 Jan 2018 15:03:22 GMT

TML show.html {{#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> </a> <h3>{{product_name}}</h3> <div class="chip"> <div class="chip-label">KES.{{price}}</div> </div> <p>{{product_desc}}</p> <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> </div> myApp.js var myApp = new Framework7({ template7Pages: true, // enable Template7 rendering for Ajax and Dynamic pages animateNavBackIcon: true, // Enabled rendering pages using Template7 template7Pages: true, precompileTemplates: true, preprocess: function (content, url, next) { var rootUrl = 'http://localhost/phonestore/public/api/'; switch(url) { 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; $$.ajax({ url: serverUrl, dataType: "json", success: function (data, textStatus, jqXHR) { var compiled = Template7.compile(content); next(compiled(data)); }, error: function (jqXHR, textStatus, errorThrown) { alert("ERROR: " + errorThrown) } }); break; ..... } } All data is coming from server. Getting data-id attribute is not working in preprocess, please assist.