I'm working on a Framework7/Template7 dynamically loaded pages content. This work perfectly when im using static "context" in JSON format. But when i'd like to test it with real world data from API then i have strange effect. Below i paste working and not working code:
TEMPLATE (always the same):
<script id="template" type="text/template7"> <ul> {{#each this}} <li>{{id}} {{title}}</li> {{/each}} </ul> </script> JS (working):
myApp.onPageInit('holidays', function (page) { var template = $$('#template').html(); var compiledTemplate = Template7.compile(template); var context = [ { "userId": 1, "id": 1, "title": "quidem molestiae enim" }, { "userId": 1, "id": 2, "title": "sunt qui excepturi placeat culpa" }, { "userId": 1, "id": 3, "title": "omnis laborum odio" } ]; var html = compiledTemplate(context); document.getElementById('holidays_tpl').innerHTML = html; }) EFFECT (working):
1 - quidem molestiae enim 2 - sunt qui excepturi placeat culpa 3 - omnis laborum odio JS (not working):
myApp.onPageInit('holidays', function (page) { var template = $$('#template').html(); var compiledTemplate = Template7.compile(template); $$.get('https://jsonplaceholder.typicode.com/albums', function (json) { document.getElementById('holidays_tpl').innerHTML = compiledTemplate(json); }); }) EFFECT (bad):
-
-
-
...x500
-
API link is from portal with sample APIs.
I dont know why this not working with external JSON source?
Thanks!
framework7but have you triedcompiledTemplate(JSON.parse(json));inside the$$getsuccess handler? A quick look in the Dom7 docs shows as well aDom7.getJSONmethod. Perhaps this would work, but it's only a guess...