script标签的type为 text/template 模板搭配 jquery.nano() 实现模板参数传递

最新推荐文章于 2021-11-14 11:47:36 发布

z1234567891111

最新推荐文章于 2021-11-14 11:47:36 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/z1234567891111/article/details/106023025

版权

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
<script src="jQuery-2.2.0.min.js"></script>
</head>

<body>

<div class="col-sm-9" id="img_div"></div>

<script type="text/template" id="tempSc">
    <div>{name}</div>
    <div>{phone}</div>
</script>

<script>
    let  objs = [{ "name": "张三", "phone": "13123456789" },{ "name": "李四", "phone": "15123456789" }]
    for (const i in objs) {
        if (objs.hasOwnProperty(i)) {
            const element = objs[i];
            $("#img_div").append($.nano($("#tempSc").html(), element));
        }
    }
    //对jquery的扩展
    $.extend({
        nano:function(template,data){//模板
	    	return template.replace(/\{([\w\.]*)\}/g, function(str, key) {
		    	var keys = key.split("."), value = data[keys.shift()];
		    	$.each(keys, function() {
		    		value = value[this];
		    	});
		    	return (value === null || value === undefined) ? "" : value;
		    });
	    }
    });
</script>

</body>
</html>

优惠劵

z1234567891111

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
script标签的type为 text/template 模板搭配 jquery.nano() 实现模板参数传递

<!DOCTYPE html><html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"><head><script src="jQuery-2.2.0.min.js"></script></head><body><div class="col-sm-9" id="img_div"></div><script type=".
复制链接

扫一扫