Framework7 - Kompilasi Otomatis

Deskripsi

Dalam Template7 Anda dapat mengkompilasi template Anda secara otomatis dengan menentukan atribut khusus dalam tag <script>.

Kode berikut menunjukkan tata letak kompilasi otomatis -

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

Anda dapat menggunakan atribut berikut untuk menginisialisasi kompilasi otomatis -

type = "text/template7" - Ini digunakan untuk memberi tahu Template7 untuk melakukan kompilasi otomatis dan ini adalah jenis skrip yang diperlukan.
id = "myTemplate" - Templat dapat diakses melalui id dan merupakan id templat yang diperlukan.

Untuk kompilasi otomatis, Anda perlu mengaktifkan inisialisasi aplikasi dengan meneruskan parameter berikut -

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

Template7.templates / myApp.templates

Template yang dikompilasi secara otomatis dapat diakses sebagai properti Template7.templates setelah menginisialisasi aplikasi. Ini juga dikenal sebagai myApp.templates di mana myApp adalah instance aplikasi yang diinisialisasi.

Anda dapat menggunakan template berikut di file index.html kami -

<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>

Anda juga dapat mengakses template di JavaScript setelah inisialisasi aplikasi -

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