In the downloaded/installed package we need JavaScript files (.js) from the dist/ folder.
And include required script in our HTML page:
<html> <head> ... <script src="path/to/template7.min.js"></script> </head> <body> ... </body> </html>
Template7 templates looks like Handlebars templates, it is like regular HTML but with embedded handlebars expressions:
<div class="list-block">
<ul>
{{#each items}}
<li class="item-content">
<div class="item-inner">
<div class="item-title">{{title}}</div>
</div>
</li>
{{/each}}
</ul>
</div>Template7 support expressions with the following syntax:
{{title}} - plain variable. Outputs "title" variable in current context
{{../title}} - plain variable. Outputs "title" variable in parent context
{{../../title}} - plain variable. Outputs "title" variable in parent context of parent context
{{this}} - plain variable. Outputs variable equals to current context
{{person.name}} - plain variable. Outputs variable equals to "name" property of "person" variable in current context
{{../person.name}} - plain variable. The same but for parent context
{{@index}} - access to additional data variable. Such data variables could be used in helpers
{{#each}} - begin of block expression
{{else}} - begin of block inverse expression (where supported)
{{/each}} - end of block expression
{{#each reverse="true"}} - begin of block expression with passed reverse:true hash arguments
Helpers could be plain expressions and block expressions:
{{join myArray delimiter=", "}} - execute "join" helper and pass there "myArray" variable of current context and delimiter:', ' hash argument
Template7 is a globally available Window function.
First of all we need to deliver string template. For example, we can store in script tag:
<script id="template" type="text/template7">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>Now we need to compile it in JavaScript. Template7 will convert our template string to plain JavaScript function:
var template = $$('#template').html();
// compile it with Template7
var compiledTemplate = Template7.compile(template);
// Now we may render our compiled template by passing required context
var context = {
firstName: 'John',
lastName: 'Doe'
};
var html = compiledTemplate(context);Now, html variable will contain:
<p>Hello, my name is John Doe</p>
以上这个是单独使用Template7.js的实例。
下面这个是在Framework7中使用Template7实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template7 实例教程
</title>
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<script id="homeTemplate" type="text/template7">
<div data-page="home" class="page">
<div class="page-content">
<div class="content-block">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
<script type="text/javascript" src="//ku.shouce.ren/libs/fk7/1.4.2/js/framework7.min.js">
</script>
<script>// 声明Dom7
var $$ = Dom7;
// 初始化 App
var myApp = new Framework7({
precompileTemplates: true
});
var mainView = myApp.addView('.view-main');
// Now we may render our compiled template by passing required context
var context = {
firstName: 'John',
lastName: 'Doe'
};
mainView.router.load({
template: Template7.templates.homeTemplate,
context: context
})
</script>
</body>
</html>