Framework7 - Compilación automática

Descripción

En Template7 puede compilar sus plantillas automáticamente especificando atributos especiales en una etiqueta <script>.

El siguiente código muestra el diseño de compilación automática:

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

Puede utilizar los siguientes atributos para inicializar la compilación automática:

• type = "text/template7" - Se utiliza para decirle a Template7 que se compile automáticamente y es un tipo de script obligatorio.

• id = "myTemplate" - Se puede acceder a la plantilla a través de la identificación y es una identificación de plantilla obligatoria.

Para la compilación automática, debe habilitar la inicialización de la aplicación pasando el siguiente parámetro:

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

Template7.templates / myApp.templates

Se puede acceder a las plantillas compiladas automáticamente como propiedades de Template7.templates después de inicializar la aplicación. También se conoce como myApp.templates, donde myApp es una instancia inicializada de la aplicación.

Puede utilizar las siguientes plantillas en nuestro archivo 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>

También puede acceder a las plantillas en JavaScript después de la inicialización de la aplicación:

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