JS标签设计 <script type="text/html" id="temp"> <div class="item"> aaaaaa </div> </script> 使用 <script LANGUAGE="JavaScript" > str=$('#temp').html(); </script>
<!-- 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>
var data = { title: "hello world", desc: "<p>这是一段描述</p>"}; var html = template("test-template",data);
document.getElementById('test-wrapper').innerHTML = html; 或JQUERY写法 $('#test-wrapper').html(html)
联系客服