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()方法的更多相关文章

  1. JavaScript模板引擎artTemplate.js——template()方法

    template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...

  2. Underscore模版引擎的使用-template方法

    之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换.当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是 ...

  3. Underscore _.template 方法使用详解

    为什么用「void 0」代替「undefined」 undefined 并不是保留词(reserved word),它只是全局对象的一个属性,在低版本 IE 中能被重写. 事实上,undefined ...

  4. IntelliJ IDEA live template 方法配置

    ** * <p></p> * 功能描述 * $params$ * @return $return$ * @author abc * @date $time$ $date$ * ...

  5. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  6. template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  7. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  8. Django.template框架 template context (非常详细)

    前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的 这会导致几个问题: 1,显然,任何页面的改动会牵扯到Python代码的改动 网站的设计改动会比Python代码改 ...

  9. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

随机推荐

  1. junit测试模板 unit-test

    一个项目能否发布上线,重要的环节就是测试.经过集成测试.性能测试.压力测试等不断循环的测试过后依据测试报告来确定上线.这些由专业的测试人员来完成,因此会导致程序开发者对自身的单元测试的弱化.若在代码中 ...

  2. 【三十三】thinkphp之SQL查询语句(全)

    一:字符串条件查询 //直接实例化Model $user=M('user1'); var_dump($user->where ('id=1 OR age=55')->select()); ...

  3. C陷阱:求数组长度

    // 这是一篇导入进来的旧博客,可能有时效性问题. 程序中,当我们建立了一个int型数组:int a[]={1,2,3,4,5,6};随后我们可能需要知道它的长度,此时可以用这种方法:length = ...

  4. 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 ...

  5. Vijos P1114 FBI树【DFS模拟,二叉树入门】

    描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树1,它的结点类型也包括F结点,B结点和I结点三种 ...

  6. 数值积分之Simpson公式与梯形公式

    Simpson(辛普森)公式和梯形公式是求数值积分中很重要的两个公式,可以帮助我们使用计算机求解数值积分,而在使用过程中也有多种方式,比如复合公式和变步长公式.这里分别给出其简单实现(C++版): 1 ...

  7. Django 用散列隐藏数据库中主键ID

    最近看到了一篇讲Django性能测试和优化的文章, 文中除了提到了很多有用的优化方法, 演示程序的数据库模型写法我觉得也很值得参考, 在这单独记录下. 原文的演示代码有些问题, 我改进了下, 这里可以 ...

  8. hbase完全分布式安装

    hbase完全分布式安装 http://hbase.apache.org/book.html#standalone_dist                         master       ...

  9. 利用光场进行深度图估计(Depth Estimation)算法之二——匹配算法

    光场相机由于能够捕获相机内部光线的强度和方向而得到整个光场,可以实现重聚焦(refocus)和视角变换等功能.进而可以进行深度估计获取深度图,前面说过利用重聚焦的图像进行深度估计,今天说一下利用不同视 ...

  10. Flexible Box布局基础知识详解

    1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...