Framework7 - Automatische Kompilierung

Beschreibung

In Template7 können Sie Ihre Vorlagen automatisch kompilieren, indem Sie spezielle Attribute in einem <script> -Tag angeben.

Der folgende Code zeigt das Layout der automatischen Kompilierung -

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

Sie können die folgenden Attribute zum Initialisieren der automatischen Kompilierung verwenden:

type = "text/template7" - Es wird verwendet, um Template7 anzuweisen, automatisch zu kompilieren, und es ist ein erforderlicher Skripttyp.
id = "myTemplate" - Auf die Vorlage kann über die ID zugegriffen werden, und es handelt sich um eine erforderliche Vorlagen-ID.

Für die automatische Kompilierung müssen Sie die App-Initialisierung aktivieren, indem Sie den folgenden Parameter übergeben:

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

Template7.templates / myApp.templates

Auf die automatisch kompilierten Vorlagen kann nach der Initialisierung der App als Eigenschaften von Template7.templates zugegriffen werden . Es wird auch als myApp.templates bezeichnet, wobei myApp eine initialisierte Instanz der App ist.

Sie können die folgenden Vorlagen in unserer Datei index.html verwenden:

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

Sie können auch nach der App-Initialisierung auf Vorlagen in JavaScript zugreifen.

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