Framework7 - Compilation automatique

La description

Dans Template7, vous pouvez compiler vos modèles automatiquement en spécifiant des attributs spéciaux dans une balise <script>.

Le code suivant montre la disposition de compilation automatique -

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

Vous pouvez utiliser les attributs suivants pour initialiser la compilation automatique -

  • type = "text/template7" - Il est utilisé pour indiquer à Template7 de se compiler automatiquement et c'est un type de script requis.

  • id = "myTemplate" - Le modèle est accessible via l'identifiant et il s'agit d'un identifiant de modèle obligatoire.

Pour la compilation automatique, vous devez activer l'initialisation de l'application en passant le paramètre suivant -

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

Template7.templates / myApp.templates

Les modèles compilés automatiquement sont accessibles en tant que propriétés de Template7.templates après l'initialisation de l'application. Il est également connu sous le nom de myApp.templatesmyApp est une instance initialisée de l'application.

Vous pouvez utiliser les modèles suivants dans notre fichier 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>

Vous pouvez également accéder aux modèles en JavaScript après l' initialisation de l'application -

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