Templates Auto Compilation

Framework7 may automatically compile all of your Template7 templates if they are specified in <script> tag with special attributes:

<script type="text/template7" id="myTemplate">
    <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>  

Where

  • type="text/template7" required script type that tell Framework7 that this is a Template7 template that could be compiled automatically

  • id="myTemplate" required template id. It makes template accessible later by this id

To enable automatic compilation you also need to enable it on App initialization by passing the following parameter:

var myApp = new Framework7({
    //Tell Framework7 to compile templates on app init
    precompileTemplates: true,
});

Template7.templates / myApp.templates

After app initialization all automatically compiled templates will be accessible as properties of Template7.templates object and its alias myApp.templates where "myApp" is an initialized app instance. Name of required template/propery will be the same as "id" attribute of <script> with this template.

So if we have the fllowing templates in our index.html file:

<script type="text/template7" id="personTemplate">
    <p>Hello, my name is {{name}} and i am {{age}} years old</p>
    <p>I work as {{position}} at {{company}}</p>
</script>
 
<script type="text/template7" id="carTemplate">
    <p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
    <p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script> 

We can access them in our JavaScript after App initialization:

var myApp = new Framework7({
    //Tell Framework7 to compile templates on app init
    precompileTemplates: true
});
 
// Render person template to HTML, its template is already compiled and accessible as Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate({
    name: 'John Doen',
    age: 33,
    position: 'Developer',
    company: 'Apple'
});
 
// Compile car template to HTML, its template is already compiled and accessible as Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
    vendor: 'Ford',
    model: 'Mustang',
    power: 300,
    speed: 280
});

If you use custom Template7 helpers and templates auto compilation, make sure that you have registered them before you initialize App!