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. asp.net core 多端口监听&日志服务

    1 配置多个端口监听 HostingAbstractionsWebHostBuilderExtensions. public static IWebHostBuilder UseUrls(this I ...

  2. [ZOJ3256] Tour in the Castle

    插头DP+矩阵乘法 m喜闻乐见地达到了10^9级别..而n<=7,并且没有障碍..所以列与列之间的转移时一样的..就可以上矩乘了. 感觉自己快没救了..看半天题解还是不懂.. http://ww ...

  3. 以太坊RPC机制与API实例

    上一篇文章介绍了以太坊的基础知识,我们了解了web3.js的调用方式是通过以太坊RPC技术,本篇文章旨在研究如何开发.编译.运行与使用以太坊RPC接口. 关键字:以太坊,RPC,JSON-RPC,cl ...

  4. 关于win10系统安装VMware12Pro后,win10系统的 控制面板\网络和 Internet\网络连接\更改适配器选项卡中 没有虚拟网卡VMnet1和VMnet8图标,该如何把他们显示出来呢?

    安装VMware12Pro后,PC主机通过命令行:ipconfig/all ,查看发现没有VMnet1和VMnet8. 然后我首先尝试打开VMware12Pro的虚拟网络编辑器: 然后先点击" ...

  5. chorme浏览器的Access-Control-Allow-Origin拦截限制

    今天在公司调试一个项目,这个项目的前后端是分离开的,也就是说前后端是在两个站点上的.我负责的前端页面在请求后端数据的时候数据可以拿到,但是chrome安全级别高,自动拦截跨域和站点的数据请求及交互,出 ...

  6. Caused by: java.sql.SQLException: Couldn't perform the operation getAutoCommit: You can't perform any operations on this connection. It has been automatically closed by Proxool for some reason (see lo

    系统启动,一段时间不操作,然后在来操作时,报错如下: Caused by: java.sql.SQLException: Couldn't perform the operation getAutoC ...

  7. 使用nginx处理静态资源请求,其余交给node

    由于项目后台使用的是node,然而node不适合对静态资源的处理,因为他的异步处理(事件轮询)机制,所以更擅长的是密集I/O型的应用,所以我就有了一个想法,使用nginx来做反向代理,当请求的是静态资 ...

  8. SpringBoot介绍及环境搭建

    什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...

  9. AD转换

    一.AD转换的概念  AD转换的功能是把模拟量电压转换为数字量电压.DA转换的功能正好相反,就是讲数字量转换位模拟量. 二.芯片PCF8591介绍 PCF8591是一个单片集成.单独供电.低功耗.8- ...

  10. Spark算子--countByKey

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/1633ffc63e2c925e930adadc9528c830.html  countByKey--Actio ...