- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Auto Compilation
Description
In Template7 you can compile your templates automatically by specifying special attributes in a <script> tag.
The following code shows the auto compilation layout −
<script type = "text/template7" id = "myTemplate"> <p>Hello, my name is {{name}} and i am {{age}} years old</p> </script>
You can use the following attributes for initializing the auto compilation −
type = "text/template7" − It is used to tell Template7 to auto compile and it is a required script type.
id = "myTemplate" − Template is accessible through the id and it is a required template id.
For automatic compilation, you need to enable app initialization by passing the following parameter −
var myApp = new Framework7 ({ //It is used to compile templates on app init in Framework7 precompileTemplates: true, });
Template7.templates / myApp.templates
The automatically compiled templates can be accessed as properties of Template7.templates after initializing the app. It is also known as myApp.templates where myApp is an initialized instance of the app.
You can use the following 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>
You can also access templates in 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: 'King Amit', age: 27, position: 'Developer', company: 'AngularJs' }); // Compile car template to HTML, its template is already compiled and accessible as //Template7.templates.carTemplate var carHTML = Template7.templates.carTemplate({ vendor: 'Honda', model: 'city', power: 1200hp, speed: 300 });