Can't find variable Template7 when trying to compile in internal pages?

1

I have updated my old code to the new framewotk7 and now all my template7 pages are not recognising the template7.compile to compile my dynamic templates…

anyone knows what is the problem about?

my app.js

var app = new Framework7({
  template7Pages: true,
  root: '#app', // App root element
  id: 'io.framework7.myapp', // App bundle ID
  name: 'myapp', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  lazy: {
    threshold: 50,
    sequential: false,
  },

39
Screenshot 2019-12-10 at 13.19.39.png1660×250 49.6 KB

my page code that throw this error:

var store = {"store":[store]}; // this is an object array with all the store details!
tmp_store =
          '\
          {{#each store}}\
          {{store_name}} bla bla bla...
          {{/each}}\
';
var compiledStoreTemplate = Template7.compile(tmp_store)(store);
$("[ref-store='" + _store_id + "'] .store-content").html(compiledStoreTemplate);

Any ideas how to fix this issue?
thanks!

2

I just tested many things and I found out that only template7.compile works only for the home.f7.html page and in internal template pages there is an error is all the time the same in the console…

Error:

can't find variable template7

Test code below: works only on home.f7.html not in internal pages :frowning:

      var listTemplate = $('script#template').html();
      var compiledListTemplate = Template7.compile(listTemplate);
      var context = {
      firstName: 'John',
      lastName: 'Doe'
      };
      var html = compiledListTemplate(context);
      alert(html);

any ideas what is causing this strange behaviour?

or the new version of F7 needs something in the app.js to enable template7 to compile in internal pages or where this error is coming from?

Thanks

3

import Template7 from 'template7';

1 Like
4

:point_up_2:When working with ES modules you need to import things in the beginning of your <script> section

1 Like
5

I didn’t know that but in the home page it is working template7 but not in internal pages and and I didn’t add anything at the beginning of the home script … this is the part I do not understand yet…

My app.js at the beginning was having this and I thought template7 it was already included for all pages if it is in the app.js but only worked at home page:

import $$ from 'dom7';
import Framework7, {Template7} from 'framework7/framework7.esm.bundle.js';

I will do that thing you recommend me to add that in the beginning of the script and see if it works in the internal pages!

Maybe it should be better to include that information in the documentation that ES modules need to be imported now in every single page because when someone was working with previous versions of F7 it is difficult to detect why this problem comes up here and there … Now I know :slight_smile:

Specially the template7 it is a very useful module!
thanks again Vladimir!

6

This is how ES modules work in JavaScript in general. You need to include in every file where you a reference them

1 Like
7

Thanks again Vladimir!