模板引擎

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

  • template.js
  1. 语法
  • 表达式
  • 对内容编码输出: {{content}}
  • 条件表达式
{{if admin}}
 <p>admin</p>
{{else if code > 0}}
 <p>master</p>
{{else}}
 <p>error!</p>
{{/if}}
遍历表达式
  • 遍历表达式
{{each list as value index}}
 <li>{{index}} - {{value.user}}</li>
{{/each}}
  • 实例
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic-demo</title>
        <script src="../dist/template.js"></script>
    </head>
    <body>
        <div id="content"></div>
            <script id="test" type="text/html">
                {{if isAdmin}}
                    <h1>{{title}}</h1>
                    <ul>
                     {{each list as value i}}
                      <li>索引 {{i + 1}} :{{value}}</li>
                     {{/each}}
                    </ul>
                {{/if}}
            </script>
            <script>
                var data = {
                 title: '基本例子',
                 isAdmin: true,
                 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
                };
                var html = template('test', data);
                document.getElementById('content').innerHTML = html;
            </script>
    </body>
</html>
posted @ 2019-03-15 13:48  福小松  阅读(201)  评论(0编辑  收藏  举报