Template7

Template7 is a mobile-first JavaScript template engine with Handlebars-like syntax.

It is ultra lightweight (around 1KB minified and gzipped) and blazing fast (up to 3 times faster than Handlebars in mobile Safari!) and it is already included in Framework7. So you don’t need to include any additional scripts.

Usage & API

Сheck out Template7 Website for the most relevant guide and API. But skip the part about downloading, it is already included into Framework7.

Performance Tips

Template7 is fast and you can make it works even faster in your apps. The slowest part (but still very fast in T7) in all this compilation/rendering process is the compilation from string to pure JS function when you do Template7.compile(). So don’t compile the same templates multiple times, one time will be enough:

  1. // Initialize app
  2. var app = new Framework7();
  4. var $$ = Dom7;
  6. // Compile templates once on app load/init
  7. var searchTemplate = $$('script#search-template').html();
  8. var compiledSearchTemplate = Template7.compile(searchTemplate);
  10. var listTemplate = $$('script#list-template').html();
  11. var compiledListTemplate = Template7.compile(listTemplate);
  13. // That is all, now and further just execute compiled templates with required context
  14. app.on('pageInit', function (page) {
  15.     // Just execute compiled search template with required content:
  16.     var html = compiledSearchTemplate({/*...some data...*/});
  18.     // Do something with html...
  19. });

Using Template7 Outside

Template7 could be used as a standalone library without Framework7. You will need to download it atTemplate7 GitHub repo