代码拉取完成,页面将自动刷新
https://virtuecai.github.io/jquery.underscore.render/
<style>
.underscore-template {
display: none;
}
</style>
<table>
<tbody id="tbody1">
<script class="underscore-template" type="text/html">
<tr>
<td>{%= $index %}</td>
<td>{%= name %}</td>
<td>{%= age %}</td>
{% _.each(cars, function(a , b, c){ %}
<td>{%= a %}</td>
{% }); %}
</tr>
</script>
</tbody>
</table>
var userList = [
{name: 'virtuecai', age: 18, cars: ['car1','car2']},
{name: 'lq', age: 20, cars: ['car1','car2', 'car3']}
];
$('#tbody1').templateRender({data: userList});
<table>
<tbody id="tbody2">
<tr class="underscore-template">
<td>{%= $index %}</td>
<td>{%= name %}</td>
<td>{%= age %}</td>
</tr>
</tbody>
</table>
var userList = [
{name: 'virtuecai', age: 18},
{name: 'lq', age: 20}
];
$('#tbody2').templateRender({data: userList});
<div class="container">
<h1 class="underscore-template">
<span>hello, {%= name %}, {%= age %}</span>
</h1>
</div>
var user = {name: 'virtuecai', age: 18};
$('div.container').templateRender({data: user});
options: {
/**
* 渲染模版的数据, 对象{} 或者 对象数组[{..},{..}]
*/
data: {},
/**
* 是否启用默认图片加载, 如果为 true, image 表情语法: <img data-src='' default-src='' />
* default-src 为 data-src 加载失败后显示的图片
* data-src='' 最终会 set attr src 中
*
*/
enableDefaultImageSrc: false,
/**
* 自动移除上一次渲染的元素
*/
autoRemove: true,
beforeCallback: function () {
},
afterCallback: function () {
},
/**
* 检查到传入 data 数据为空时回调
* @param $container 调用插件的 jquery 对象
*/
emptyDataCallBack: function ($container) {
},
/**
* 针对于 data Array, 单个模版 渲染之前
* @param item Array 中的单个数据, 如果是原始数据类型, 需要转换 {} 对象模版使用
*/
itemRenderBeforeCallBack: function (item) {
},
/**
* 针对于 data Array, 单个模版 渲染之前
* @param $item 模版+数据 渲染之后的 jquery 对象(dom)
*/
itemRenderAfterCallBack: function ($item) {
}
}
<script>
;var itemList = [{...},{...},{...}];
var item = $('tbody tr:fist').data('item');//第一个tr
// item 数据就是 itemList[0]
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型