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
在初始化应用程序后， 自动编译的模板可以作为 < i> Template7.templates 的属性访问。它也称为
myApp.templates ，其中 < i> 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>
您还可以在应用初始化后 < i> 访问 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
});
