Framework7 - Templates Overview

Advertisements

Previous Page
Next Page  

Description

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

Performance

The process of compiling string to JS function is the slowest segment of template7. Hence, you do not need to compile the template multiple times, only once 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 a standalone library without Framework7. The Template7 files can be installed using two ways −

  • You can download from Template7 github repository.

    • Or

  • You can install it using the following command via Bower −

bower install template7
Advertisements