首先,引入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. flume介绍与原理(一)

    1 .背景 flume是由cloudera软件公司产出的可分布式日志收集系统,后与2009年被捐赠了apache软件基金会,为hadoop相关组件之一.尤其近几年随着flume的不断被完善以及升级版本 ...

  2. nodejs学习篇

    最近在找工作,然后都说会个后台语言更好,选来选去,觉得nodejs比较有意思,就开始着手学这个了. 其实个人觉得,没有人领一下或者没有本好书去跟着做,这样的学习实在特别累,像我这种刚入门的菜鸟,完全搞 ...

  3. hexo 本地local4000打不开解决方法

    错误:Cannot GET /spadesq.github.io/ (注:spadesq.github.io是原来放hexo文件夹的名字) 由于我后来把hexo文件夹搬迁到别处,但我发现打开本地,地址 ...

  4. Currency System in Geraldion

    standard output A magic island Geraldion, where Gerald lives, has its own currency system. It uses b ...

  5. Web自动化测试学习方向(Selenium)

    目前越来越多的人想学自动化测试,认为自动化测试好牛逼.经常在测试交流群里看见有HR发招聘广告说:招初级(功能测试),招中级(性能测试),招高级(自动化测试)...... 我不去讨论他们这个初中高级的说 ...

  6. get github

    Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目前,包括Rubinius ...

  7. java selenium (十一) 操作弹出对话框

    Web 开发人员通常需要利用JavaScript弹出对话框来给用户一些信息提示, 包括以下几种类型 阅读目录 对话框类型 1.  警告框: 用于提示用户相关信息的验证结果, 错误或警告等 2. 提示框 ...

  8. PHP 捕捉错误,记录到日志

    register_shutdown_function("shutdown"); define('ERR_LOG_FILE', '/dev/shm/php_log.txt'); if ...

  9. cygwin下载指南(转)

    http://blog.chinaunix.net/uid-20178959-id-1731456.html

  10. UnityContainer 实现DI

    DI(依赖注入) 的方式有很多种: 接口注入,属性注入,构造注入等.DI主要是为了实现代码的松耦合,方便代码的维护和扩展.(其实都是扯淡). 来说说我为啥要使用DI吧.公司有个项目,需要我一个人完成( ...