JQuery.Tmpl.js学习记录

最新推荐文章于 2018-08-03 14:04:24 发布

Tonhex_Lan

最新推荐文章于 2018-08-03 14:04:24 发布

阅读量507

点赞数

分类专栏： javascript 文章标签：模板 jquery

本文链接：https://blog.csdn.net/Tonhex_Lan/article/details/64918495

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：JQuery.Tmpl.js详解
学习都是从demo开始，以下是我模仿的一个demo。没想到问题出乎意料的多。

<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{= Name}}</span>
    </div>
</script>
<script type="text/javascript">
　　var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }];
　　$("#demo").tmpl(users).appendTo('#div_demo');
</script>

反复对照了例子，没有发现有什么不同，但就是出不来效果，然后开始排查错误

检查模板是否可以使用
- 将占位符${}去掉，直接使用常量，可以显示结果，说明模板可以调用
检查json
- JSON.Parse（）进行转换，无效；ps：该方法是要导入相关的json包，作用是将字符串转换json，本例中users实际上已经是json格式了
- users = [{ “ID”: ‘think8848’, “Name”: ‘Joseph Chan’, “Num”: ‘1’, “Status”: 1 }]; 将json中的名称用双引号包裹；依然无效
查看页面
- 通过开发者工具查看，发现模板中占位符位置是空白的！这就是根本原因了，我做测试时使用的是jsp文件，${}被当成了el表达式了
- 将占位符${}换成另一种形式{{= }},问题解决，效果出来了