jsRender绑定数据
首先,引入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绑定数据的更多相关文章
- Android之ListView性能优化——一行代码绑定数据——万能适配器
如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 【WPF】绑定数据
WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- knockoutjs中使用mapping插件绑定数据列表
使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的 ...
- csharp: 用Enterprise Library对象实体绑定数据
Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- WebDataTree 使用XML做数据源绑定数据
英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...
- ASPxGridView中如何对主从表绑定数据
注:在从表的aspxgridview中的(OnDataBinding()事件中绑定数据)-----代码如下 //绑定属性值表protected void grid2_sonTable_DataBind ...
随机推荐
- Nodejs express中创建ejs项目,解决express下默认创建jade,无法创建ejs问题
最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: express -t ejs microblog 可是执行后,仍 ...
- 下载历史版本App超详细教程
有些时候我们需要下载旧版本的 App 进行研究或者其他用途,然而在 iOS 下,苹果的 App Store 里面默认只能下载最新版本的 App,对滴,就是这么任性,不服不行.然而在 Android 里 ...
- Bootstrap学习之起步
安装Bootstrap环境 从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.我下载的是预编译版,即下图中的第一个. 将其解压缩到任意目录即可看到以下(压缩 ...
- 生活life
1.想办法努力挣钱,而不是如何省钱. 2.再愤怒也不大吼大叫,保持冷静. 3.喜欢的东西自己努力赚钱买. 4.少说多做,能站不坐,适当运动. 5.不要认为找个有钱男人就什么都有了.世界上年轻的女孩子, ...
- jQuery查找——parent/parents/parentsUntil/closest
jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集 ...
- ldconfig和ldd用法
一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...
- ExtJs 进度条(轮询)
客户端代码: Ext.onReady(function () { Ext.get('mb').on('click', function () { Ext.Ajax.request({ url: roo ...
- hdu 1712, multiple-choice knapsack, 分类: hdoj 2015-07-18 13:25 152人阅读 评论(0) 收藏
reference: 6.4 knapsack in Algorithms(算法概论), Sanjoy Dasgupta University of California, San Diego Chr ...
- 第三篇bootstrap 网格基础
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...
- nginx(一)
crul新浪微博的时候发现对面用的是nginx服务器,在虎扑足球(挺好的足球论坛)讨论世界杯也发现他们也用这nginx,联想到阿里的tengine也是基于nginx的,觉得有了解一下nginx的必要了 ...