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代码拼接上去 ...
随机推荐
- asp.net core 多端口监听&日志服务
1 配置多个端口监听 HostingAbstractionsWebHostBuilderExtensions. public static IWebHostBuilder UseUrls(this I ...
- [ZOJ3256] Tour in the Castle
插头DP+矩阵乘法 m喜闻乐见地达到了10^9级别..而n<=7,并且没有障碍..所以列与列之间的转移时一样的..就可以上矩乘了. 感觉自己快没救了..看半天题解还是不懂.. http://ww ...
- 以太坊RPC机制与API实例
上一篇文章介绍了以太坊的基础知识,我们了解了web3.js的调用方式是通过以太坊RPC技术,本篇文章旨在研究如何开发.编译.运行与使用以太坊RPC接口. 关键字:以太坊,RPC,JSON-RPC,cl ...
- 关于win10系统安装VMware12Pro后,win10系统的 控制面板\网络和 Internet\网络连接\更改适配器选项卡中 没有虚拟网卡VMnet1和VMnet8图标,该如何把他们显示出来呢?
安装VMware12Pro后,PC主机通过命令行:ipconfig/all ,查看发现没有VMnet1和VMnet8. 然后我首先尝试打开VMware12Pro的虚拟网络编辑器: 然后先点击" ...
- chorme浏览器的Access-Control-Allow-Origin拦截限制
今天在公司调试一个项目,这个项目的前后端是分离开的,也就是说前后端是在两个站点上的.我负责的前端页面在请求后端数据的时候数据可以拿到,但是chrome安全级别高,自动拦截跨域和站点的数据请求及交互,出 ...
- 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 ...
- 使用nginx处理静态资源请求,其余交给node
由于项目后台使用的是node,然而node不适合对静态资源的处理,因为他的异步处理(事件轮询)机制,所以更擅长的是密集I/O型的应用,所以我就有了一个想法,使用nginx来做反向代理,当请求的是静态资 ...
- SpringBoot介绍及环境搭建
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
- AD转换
一.AD转换的概念 AD转换的功能是把模拟量电压转换为数字量电压.DA转换的功能正好相反,就是讲数字量转换位模拟量. 二.芯片PCF8591介绍 PCF8591是一个单片集成.单独供电.低功耗.8- ...
- Spark算子--countByKey
转载请标明出处http://www.cnblogs.com/haozhengfei/p/1633ffc63e2c925e930adadc9528c830.html countByKey--Actio ...