template()方法
template(id, data)方法:
id:必传,渲染模板的id。
data:可选,一个Object对象。
return:传data—>渲染完成html代码;不传data—>一个渲染函数。
示例一如下:
<div id="content"></div>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="test_tmpl">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul> </script>
<script type="text/javascript">
var data = {
title: "标签",
list: ["文艺", "博客", "摄影", "电影", "民谣", "旅行", "吉他"]
};
var html = template("test_tmpl", data);
document.getElementById("content").innerHTML = html;
</script>
示例二如下:
<div id="content"></div>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="test_tmpl">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul> </script>
<script type="text/javascript">
var data = {
title: "标签",
list: ["文艺", "博客", "摄影", "电影", "民谣", "旅行", "吉他"]
};
var html = template("test_tmpl");
document.getElementById("content").innerHTML = html(data);
</script>
依据上面的案例,我们可以这样理解template()方法:
1、传入的第二个参数,作为模板里面的一个全局对象。
2、取这个对象的某个属性,只需直接调用属性名即可,例如:list就是data的一个属性。
3、第二个参数只能传对象,不能传数组。当我们拿到一个数组的进行遍历的时候,需要自己初始化一个对象,用一个属性和数组进行映射。
关于each语句的应用:
1、list是对象的属性名(值是数组的属性),as是一个声明符号,value代表数组中的单个对象,i是序列号,从0开始。
2、each有开始有结束,结束加斜线,有点类似html标签的开始和结束。
template()方法的更多相关文章
- JavaScript模板引擎artTemplate.js——template()方法
template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...
- Underscore模版引擎的使用-template方法
之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换.当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是 ...
- Underscore _.template 方法使用详解
为什么用「void 0」代替「undefined」 undefined 并不是保留词(reserved word),它只是全局对象的一个属性,在低版本 IE 中能被重写. 事实上,undefined ...
- IntelliJ IDEA live template 方法配置
** * <p></p> * 功能描述 * $params$ * @return $return$ * @author abc * @date $time$ $date$ * ...
- JavaScript模板引擎artTemplate.js——template.compile()方法
template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...
- template.compile()方法
template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...
- 新手入门Underscore.js 中文(template)
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- Django.template框架 template context (非常详细)
前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的 这会导致几个问题: 1,显然,任何页面的改动会牵扯到Python代码的改动 网站的设计改动会比Python代码改 ...
- 使用Underscore.js的template将Backbone.js的js代码和html代码分离
这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...
随机推荐
- junit测试模板 unit-test
一个项目能否发布上线,重要的环节就是测试.经过集成测试.性能测试.压力测试等不断循环的测试过后依据测试报告来确定上线.这些由专业的测试人员来完成,因此会导致程序开发者对自身的单元测试的弱化.若在代码中 ...
- 【三十三】thinkphp之SQL查询语句(全)
一:字符串条件查询 //直接实例化Model $user=M('user1'); var_dump($user->where ('id=1 OR age=55')->select()); ...
- C陷阱:求数组长度
// 这是一篇导入进来的旧博客,可能有时效性问题. 程序中,当我们建立了一个int型数组:int a[]={1,2,3,4,5,6};随后我们可能需要知道它的长度,此时可以用这种方法:length = ...
- Codeforces 725B Food on the Plane
B. Food on the Plane time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...
- Vijos P1114 FBI树【DFS模拟,二叉树入门】
描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树1,它的结点类型也包括F结点,B结点和I结点三种 ...
- 数值积分之Simpson公式与梯形公式
Simpson(辛普森)公式和梯形公式是求数值积分中很重要的两个公式,可以帮助我们使用计算机求解数值积分,而在使用过程中也有多种方式,比如复合公式和变步长公式.这里分别给出其简单实现(C++版): 1 ...
- Django 用散列隐藏数据库中主键ID
最近看到了一篇讲Django性能测试和优化的文章, 文中除了提到了很多有用的优化方法, 演示程序的数据库模型写法我觉得也很值得参考, 在这单独记录下. 原文的演示代码有些问题, 我改进了下, 这里可以 ...
- hbase完全分布式安装
hbase完全分布式安装 http://hbase.apache.org/book.html#standalone_dist master ...
- 利用光场进行深度图估计(Depth Estimation)算法之二——匹配算法
光场相机由于能够捕获相机内部光线的强度和方向而得到整个光场,可以实现重聚焦(refocus)和视角变换等功能.进而可以进行深度估计获取深度图,前面说过利用重聚焦的图像进行深度估计,今天说一下利用不同视 ...
- Flexible Box布局基础知识详解
1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...