Framework7 - 自動編譯

描述

在 Template7 中，您可以透過在 <script> 標籤中指定特殊屬性來自動編譯您的模板。

以下程式碼顯示了自動編譯佈局：

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

您可以使用以下屬性初始化自動編譯：

• type = "text/template7" - 用於告訴 Template7 自動編譯，這是必需的指令碼型別。

• id = "myTemplate" - 透過 id 訪問模板，這是必需的模板 id。

要進行自動編譯，您需要透過以下引數啟用應用程式初始化：

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

Template7.templates / myApp.templates

自動編譯的模板可以在應用程式初始化後作為 Template7.templates 的屬性訪問。它也稱為 myApp.templates，其中 myApp 是應用程式的已初始化例項。

您可以在我們的 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> 

您也可以在應用程式初始化之後在 JavaScript 中訪問模板：

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