JavaScript模板引擎 art-template.js 的使用（script 标签模板使用）

art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/
中文文档地址https://aui.github.io/art-template/zh-cn/docs/
下载地址: https://github.com/aui/art-template

善用JS标签
如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接拼接起来，十分的不方便。给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取，然后再通过相关的模板工具进行处理，插入到页面中。这样就把大段的HTML操作从js里面分离开了。

JS标签设计
<script type="text/html" id="temp">
    <div class="item">
       aaaaaa
    </div>
</script>

使用
<script LANGUAGE="JavaScript" >
   str=$('#temp').html();
</script>

如果是由数据渲染，简单的自己做循环拼接一下，复杂的就可以用art-template.js插件动态渲染

<!-- diy元素: 搜索栏 -->
        <script id="tpl_diy_search" type="text/html">
            <div class="drag" id="diy-{{ id }}" data-itemid="{{ id }}">
                <div class="diy-search"
                     style="background: {{ style.background }}; padding-top:{{ style.paddingTop  }}px; ">
                    <div class="inner left {{ style.searchStyle }}" style="background: {{ style.inputBackground }};">
                        <div class="search-input"
                             style="text-align: {{ style.textAlign }}; color: {{ style.inputColor }};">
                            <i class="search-icon iconfont icon-ss-search"></i>
                            <span>{{ params.placeholder }}</span>
                        </div>
                    </div>
                </div>
                <div class="btn-edit-del">
                    <div class="btn-edit">编辑</div>
                    <div class="btn-del">删除</div>
                </div>
            </div>
        </script>

注意JSON数据对应模板的动态填充关系和使用方法（如果有）

循环的例子

以下是标准流程

1在这里引入腾讯的（自行下载引入）

<script src="./art-template.js"></script>

2、编写模板和渲染的容器

<div id="test-wrapper"> </div>

    <script id="test-template" type="text/html">
    <h1>{{title}}</h1>
    </script>

3、获取模板并往模板里插入数据

var data = {
    title: "hello world",
    desc: "<p>这是一段描述</p>"};
    var html = template("test-template",data);

4、把模板渲染到页面

document.getElementById('test-wrapper').innerHTML = html;
或JQUERY写法
$('#test-wrapper').html(html)