自动编译模板

优质

小牛编辑

130浏览

2023-12-01

如果你在 <script> 标签中编写模板，并且设置了特定的属性，那么 Framework7 会自动帮你编译所有的模板：

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

其中：

type="text/template7" 指定了这个script的内容会被 Framework7 当做一个 Template7 模板自动编译
id="myTemplate" 是模板的id，后面可以通过这个id来方法这个模板

你需要在初始化应用的时候传入一个参数来启用自动编译模板功能：

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

Template7.templates / myApp.templates

应用初始化完成之后，所有的编译好的模板都可以通过 Template7.templates 对象来访问，他还有一个别名是 myApp.templates。模板的名字就是 <script> 标签上的 id 属性

所以，如果我们有下面这些模板:

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

当应用初始化完成之后，我们可以在JS中这样访问：

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: 'John Doen',
    age: 33,
    position: 'Developer',
    company: 'Apple'
});
 
// Compile car template to HTML, its template is already compiled and accessible as Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
    vendor: 'Ford',
    model: 'Mustang',
    power: 300,
    speed: 280
});

如果你使用了自定义的辅助方法和模板自动编译，请确保你初始化应用之前注册他们。