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 ({
    //它用于在 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> 

您还可以在应用程序初始化after使用 JavaScript 访问模板 −

var myApp = new Framework7 ({
   //告诉 Framework7 在应用程序初始化时编译模板
    precompileTemplates: true
});
 
// 将 person 模板渲染为 HTML，其模板已编译并可作为
//Template7.templates.personTemplate 访问
var personHTML = Template7.templates.personTemplate ({
   name: 'King Amit',
   age: 27,
   position: 'Developer',
   company: 'AngularJs'
});
// 将汽车模板编译为 HTML，其模板已编译并可作为
//Template7.templates.carTemplate 访问
var carHTML = Template7.templates.carTemplate({
   vendor: 'Honda',
   model: 'city',
   power: 1200hp,
   speed: 300
});