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,
});
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!