首先,引入jquery(很重要),其次引入jsRender.js

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jsRender.min.js"></script>

如果是静态引入数据,那就再引入数据文件

 <script type="text/javascript" src="js/dataInfo.js"></script>

注:数据必须是一个json对象

 var data={
   "B":"bb",
"A":[{"a":"asas"},{"aa":1}],
};

html页面写模板

 <div id="show">

 </div>
<script type="text/x-jsrender" id="template">
{{for data}}
<h2>{{:B}}</h2>
{{for A}}
<h3>{{if aa!==""}}{{:aa}}{{/if}}</h3>
{{/for}}
{{/for}}
</script>

js将数据绑到模板上

 $(document).ready(function(){
var info=data;
var html=$.templates("#template").render(info);
$("#show").html(html);
});

静态数据绑定成功~

PS:JSRender获取父元素

用~定义新的变量,将要取到的元素缓存下来,然后直接用~a就行

{{for Info ~a = tt}}

jsRender绑定数据的更多相关文章

  1. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

  2. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  3. 【WPF】绑定数据

    WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)

  4. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  5. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

  6. csharp: 用Enterprise Library对象实体绑定数据

    Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...

  7. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  8. WebDataTree 使用XML做数据源绑定数据

    英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...

  9. ASPxGridView中如何对主从表绑定数据

    注:在从表的aspxgridview中的(OnDataBinding()事件中绑定数据)-----代码如下 //绑定属性值表protected void grid2_sonTable_DataBind ...

随机推荐

  1. C++对于大型图片的加载缩放尝试

    Qt对于图片的操作主要集中在这几个类 QImage ,QImageReader ,QPixmap 其中QImage这个类对图片的缩放有几个很不错的技巧,不过对于大图片却并不好使,当我们去看QImage ...

  2. 面向对象的高级编程&IO编程

    1.给类对象绑定的函数,只对这个对象生效, 而对类绑定的对象, 所有的对象都可以调用. 栗子: def set_score(self, score): self.score = score s.set ...

  3. Redis常用命令入门5:有序集合类型

    有序集合类型 上节我们一起学习了集合类型,感受到了redis的强大.现在我们接着学Redis的最后一个类型——有序集合类型. 有序集合类型,大家从名字上应该就可以知道,实际上就是在集合类型上加了个有序 ...

  4. canvas动画

    1.动画主要是requestAnimationFrame方法,现在我们来一步步实现一个在画布内滚动的实例. html代码: <canvas id="canvas" width ...

  5. sphinx索引分析——文件格式和字典是double array trie 检索树,索引存储 – 多路归并排序,文档id压缩 – Variable Byte Coding

    1 概述 这是基于开源的sphinx全文检索引擎的架构代码分析,本篇主要描述index索引服务的分析.当前分析的版本 sphinx-2.0.4 2 index 功能 3 文件表 4 索引文件结构 4. ...

  6. C# 技巧(3) C# 操作 JSON

    RestAPI中, 经常需要操作json字符串,  需要把json字符串"反序列化"成一个对象, 也需要把一个对象"序列化"成一字符串. C# 操作json, ...

  7. javascript在IE/FF/Chrome的一些兼容问题

    1.获取滚动条高度 var top=document.body.scrollTop||document.documentElement.scrollTop; 2.事件监听 var addEvent = ...

  8. git pull 和本地文件冲突问题解决

    具体方法如下 git pull origin 分支 //出现错误 git stash  缓存起来 git pull origin 分支 git stash pop //还原 git stash cle ...

  9. STC12C5A60S2 @ 22.0184Mhz 精确延时

    #include "STC12.h" // STC12C5A60S2 @ 22.0184Mhz 精确延时 void delay_10us(unsigned char n) { un ...

  10. 16083001(古墓丽影GPA)

    [目标] 编译UNREALPORJECT2工程 [思路] 1 2 3 一件衣服23932个面 vs: // // Generated by Microsoft (R) HLSL Shader Comp ...