1, 模板引擎
1) 模板 + 数据 => 静态页面片段
2)art-template 性能较好
分支语法:
- {
- {
- if value
- }
- } ... {
- {
- /if
- }
- }
- {
- {
- if v1
- }
- } ... {
- {
- else if v2
- }
- } ... {
- {
- /if
- }
- }
循环语法:
- {{each target}}
- {{$index}} {{$value}}
- {{/each}}
3) 在 script 标签内书写模板引擎代码, type='text/html', 可给定 id
模板的作用就是把模板和数据一起生成一个静态的 HTML 片段, 其使用步骤是
- <script type="text/html" id="temp"><!-- 假数据 -->
- <h1>{{title}}</h1>
- {{if menus}}
- {{each menus as value i}}
- <div>{{value}}==={{i}}</div>
- {{/each}}
- {{/if}}
- </script>
- <script>
- var data = {
- title: '美食信息',
- menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
- }
- var HTML=template('temp',data)// 模板名, 数据
- document.write(HTML)
- </script>
4) 不想让浏览器解析标签可使用转义符 #
如
{{#value}}
5) 在 JS 中存放模板
我们可以把模板以字符串的形式拼接后存起来. 利用
template.compile(模板字符串变量名) 进行渲染后返回的结果是
一个函数, 我们传参后进行调用就可以进行使用了
- <script type="text/javascript" id="temp">
- var tep = "<h1>" + "{{title}}" + "</h1>" +
- "{{if menus}}" + "{{each menus as value i}}" +
- "<div>" + "{{value}}" + "===" + "{{i}}" + "</div>" +
- "{{/each}}" +
- "{{/if}}"
- </script>
- <script>
- var data = {
- title: '美食信息',
- menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
- }
- var render = template.compile(tep)
- var HTML=render(data)
- document.write(HTML)
- </script>
来源: http://www.bubuko.com/infodetail-3023931.html