Example of Framework7, Template7 and ajax

Hello everyone,

I wonder if there is a basic example (I looked but haven’t found one) that lays out how to best use Framework7 (v1.6.5), Template7 whilst loading data with Ajax.

At this moment I do something like this within my app.js, but I doubt this is best practice:

myApp.onPageInit('item', function (page) {
  $$.getJSON(apiurl + '/posts/' + page.query.id, function( post ){
    $$('.page[data-page="item"] .page-content').html(Template7.templates.itemTemplate(post));
  });
});

While this setup works (partly) I run into rendering issues when navigating to back from a third level page (home -> item -> category overview). This also leads me to think I’m nothing using things they way I should be.

If anyone has any resource or can provide some sort of guideline how to best combine Framework7 and Template7 populated with external data (REST API) - I would certainly appreciate it!

More code to be found here: https://gist.github.com/jeffreyvr/fdce47a7c89ef12d07263b2349ecb5eb

Edit:

I have decided to look into v2 and the new routing appears to work fine. I’ve added an example: https://gist.github.com/jeffreyvr/fdce47a7c89ef12d07263b2349ecb5eb#file-routes-js

1 Like