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 ...
随机推荐
- C++对于大型图片的加载缩放尝试
Qt对于图片的操作主要集中在这几个类 QImage ,QImageReader ,QPixmap 其中QImage这个类对图片的缩放有几个很不错的技巧,不过对于大图片却并不好使,当我们去看QImage ...
- 面向对象的高级编程&IO编程
1.给类对象绑定的函数,只对这个对象生效, 而对类绑定的对象, 所有的对象都可以调用. 栗子: def set_score(self, score): self.score = score s.set ...
- Redis常用命令入门5:有序集合类型
有序集合类型 上节我们一起学习了集合类型,感受到了redis的强大.现在我们接着学Redis的最后一个类型——有序集合类型. 有序集合类型,大家从名字上应该就可以知道,实际上就是在集合类型上加了个有序 ...
- canvas动画
1.动画主要是requestAnimationFrame方法,现在我们来一步步实现一个在画布内滚动的实例. html代码: <canvas id="canvas" width ...
- sphinx索引分析——文件格式和字典是double array trie 检索树,索引存储 – 多路归并排序,文档id压缩 – Variable Byte Coding
1 概述 这是基于开源的sphinx全文检索引擎的架构代码分析,本篇主要描述index索引服务的分析.当前分析的版本 sphinx-2.0.4 2 index 功能 3 文件表 4 索引文件结构 4. ...
- C# 技巧(3) C# 操作 JSON
RestAPI中, 经常需要操作json字符串, 需要把json字符串"反序列化"成一个对象, 也需要把一个对象"序列化"成一字符串. C# 操作json, ...
- javascript在IE/FF/Chrome的一些兼容问题
1.获取滚动条高度 var top=document.body.scrollTop||document.documentElement.scrollTop; 2.事件监听 var addEvent = ...
- git pull 和本地文件冲突问题解决
具体方法如下 git pull origin 分支 //出现错误 git stash 缓存起来 git pull origin 分支 git stash pop //还原 git stash cle ...
- STC12C5A60S2 @ 22.0184Mhz 精确延时
#include "STC12.h" // STC12C5A60S2 @ 22.0184Mhz 精确延时 void delay_10us(unsigned char n) { un ...
- 16083001(古墓丽影GPA)
[目标] 编译UNREALPORJECT2工程 [思路] 1 2 3 一件衣服23932个面 vs: // // Generated by Microsoft (R) HLSL Shader Comp ...