首先,引入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. kali安装后的网络设置

    Kali linux 安装完成后,需要对其网络进行配置.使用DHCP服务是配置网卡最简单的方法之一,但渗透测试时通常不会这样做,因为系统会被记录在DHCP服务器的数据库中. 1  动态DHCP方式 配 ...

  2. VS2010 验证时出错。HRESULT = '8000000A'

    验证时出错.HRESULT = '8000000A' 在VS2010中,当为Windows窗体应用程序添加一个安装项目后,如果项目生成时出现以下错误: 验证时发生错误.HRESULT = '80000 ...

  3. Java EE : 一、图解Http协议

    目录 Java EE : 一.图解Http协议 Java EE : 二.图解 Cookie(小甜饼) Java EE : 三.图解Session(会话) 概述 一.技术基石及概述 二.深入理解技术基石 ...

  4. 前端常用的几个js判断(二)

    10.鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 ...

  5. 安装LoadRunner提示缺少vc2005_sp1_with_atl..

    装自动化负载测试工具LoadRunner前,需要预先安装其运行的基础环境.如:安装LoadRunner 11时就需要先安装Micrsoft Visual C++ 2005 SP1.C++ 2008运行 ...

  6. 当 jquery.unobtrusive-ajax.js 遇上Web API

    最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...

  7. Java--静态区域块

    public class Demo3_2 { static int i=1; static //静态区域块 { //该静态区域块只被执行一次 System.out.println("a&qu ...

  8. JAVA类和对象课后作业

    1.使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询"你已经创建了多少个对象?" 代码: //显示类 //YiMingLai 2 ...

  9. ubuntu 下安装mysql,以及配置远程登录

    安装MysQL 在Ubuntu14.04下安装MySQL比较简单,只需下面这条命令就行了: 1.输入 sudo apt-get install mysql-server 2.继续执行后,需要设定MyS ...

  10. ssh框架文件上传下载

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...