首先,引入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. plsql dev

    访问v$session,v$sesstat and v$statname视图的权限 grant create session,resource to chf; grantselectonv_$sess ...

  2. DOS常用命令总结

    cd 文件夹 如要进入D盘x文件夹,需要先d: 再Enter,然后cd x再Enter. echo \ & pause exit 换行等待按任意键退出,在此操作之前可以做发邮件等动作,bat调 ...

  3. 转:solr6.0配置中文分词器IK Analyzer

    solr6.0中进行中文分词器IK Analyzer的配置和solr低版本中最大不同点在于IK Analyzer中jar包的引用.一般的IK分词jar包都是不能用的,因为IK分词中传统的jar不支持s ...

  4. IO 相关配置参数

    INNODB I/O相关配置 记录日志为顺序I/O,刷新日志到数据文件为随机操作.顺序操作性能快于随机IO. innodb_log_file_size innodb_log_files_in_grou ...

  5. ListView

    ListView:列表展示数据1.视图 - 在其右上方小箭头点击将视图改为Largelcon:或右键属性在外观View将其改为Details2.设置列头 - 在其右上方小箭头点击选择编辑列,然后添加列 ...

  6. winform学习笔记-文档路径

    获取应用程序路径 //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\x ...

  7. [并查集] POJ 1703 Find them, Catch them

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43132   Accepted: ...

  8. daydayup3 codeforces144C

    上古的c还是很简单的,一直逗比忘记加EOF了,直到看了数据才发现 题意:给你两个字符串a,b,求问字符串a里有多少个子串排列后可以生成字符串b,‘?’可以替换为任意小写字母 思路:统计第一个子字符串小 ...

  9. 简单研究下Retrofit

    2015-09-24 15:36:26 第一部分: 1. 什么是Retrofit? (点击图片有惊喜) 以上是来自官网的解释,言简意赅,咳咳,我就不翻译了~ 2. 如何使用Retrofit? 2.1 ...

  10. SQL Server数据库性能优化之SQL语句篇【转】

    SQL Server数据库性能优化之SQL语句篇http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 近期项目需要, 做了一 ...