Template7 使用 - Template7 模版 - [ Framework7 ]

Template7 使用

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>

Templates

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>

Expressions syntax

Template7 support expressions with the following syntax:

Variables:

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

Block expressions

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

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

Compilation and Rendering

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>

实例预览