Framework7 - Compilação automática
Descrição
No Template7 você pode compilar seus modelos automaticamente especificando atributos especiais em uma tag <script>.
O código a seguir mostra o layout de compilação automática -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>
Você pode usar os seguintes atributos para inicializar a compilação automática -
type = "text/template7" - É usado para dizer ao Template7 para compilar automaticamente e é um tipo de script necessário.
id = "myTemplate" - O modelo pode ser acessado por meio do id e é um id do modelo obrigatório.
Para compilação automática, você precisa habilitar a inicialização do aplicativo passando o seguinte parâmetro -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});
Template7.templates / myApp.templates
Os modelos compilados automaticamente podem ser acessados como propriedades de Template7.templates após a inicialização do aplicativo. Também é conhecido como myApp.templates, em que myApp é uma instância inicializada do aplicativo.
Você pode usar os seguintes modelos em nosso arquivo index.html -
<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>
Você também pode acessar modelos em JavaScript após a inicialização do aplicativo -
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
});