Framework7 - Templates Overview

Description

Template7 is a lightweight mobile first JavaScript engine which represents Ajax and dynamic pages, as Template7 templates with specified context and do not require any additional scripts. Template7 is associated with Framework7 as default template engine which is a lightweight template engine which works faster for the applications.

Performance

The process of compiling string to JS function is the slowest segment of the template7. So you don't need to compile template multiple times, only one time is sufficient.

//Here initialize the app
var myApp = new Framework7();

// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);

var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);

// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
    // Execute the compiled templates with required content
    var html = compiledSearchTemplate({/*...some data...*/});

    // Do stuff with html
});

Template7 is a lightweight template engine used as standalone library without Framework7. The Template7 files can be installed using two ways:

• You can download from Template7 github repository.
Or
• You can install by using the below command via Bower:
  

  bower install template7