首先,引入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. d3 scale 学习笔记

    讲解scale 的好材料 https://www.dashingd3js.com/d3js-scales

  2. java的前台与后台

    技术上:前台是指web展示,webservice接口等输入输出接口,后台是指支持这些接口的程序. 例如读写数据库,读写文件,业务逻辑处理. 业务上来讲:前台是提供给最终用户使用的界面,后台是指管理使用 ...

  3. WinForm 公共控件

    一.窗体属性: 1.AcceptButton - 窗体的“接受”按钮.如果设置该属性,每次用户按“Enter”键都相当于“单击”了该按钮. 需要设置哪个键,就在后面选择. 2.CancelButton ...

  4. 关于博弈论中的一硬币正反问题的分析<二>

    昨天分析了一下硬币正反的问题,其中说到一点是求美女收益期望E(女)=-8xy+3y+3x-1 最大化,当然结果我们是说的一个范围内的变化以及可以针对性的调整.这里再次说明一下,不是简单的求二元函数的最 ...

  5. 读写CSV文件

    var allFiles = Directory.GetFiles(@"D:\uploadpdf", "*.csv"); string dataIsNull = ...

  6. NetworkComms V3 使用TCP通信传递IList<T>类型的数据

    客户端从服务器获取一组IList<T>类型的数据非常常见(通常从数据库中获取) 我们用NeworkComms V3来演示一下(NetworkcommsV2.x版本也同样支持) [ 使用pr ...

  7. Jenkins构建时报错:No Space left on device

    Jenkins在自动化构建服务的同时也在消耗服务器的磁盘空间,如果构建的项目个数很多,而Jenkins 服务器磁盘空间又不是非常大的话,每隔一段时间磁盘空间就会爆满导致,就会出现磁盘空间不足无法构建的 ...

  8. 【Python】【学习笔记】1.快速入门

    1.软件安装 从官网下载相应版本的安装包,一般不大. https://www.python.org/ 安装一路默认即可 2. 参考教程:快速入门:十分钟学会Python 本文的内容介于教程(Totur ...

  9. 线性控制原理——PID算法应用

    使用控制系统(PID)控制被控对象 PID控制的三要素:控制器,被控对象,反馈器.控制器就是一个数学模型,就PID来说,等同于PID算法.是对反馈量的一个处理与输出.通俗的说就是对于每个被控的量,我的 ...

  10. Codeforces Round #313 (Div. 1)

    官方英文题解:http://codeforces.com/blog/entry/19237 Problem A: 题目大意: 给出内角和均为120°的六边形的六条边长(均为正整数),求最多能划分成多少 ...