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