JavaScript模板引擎artTemplate.js——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标签的开始和结束。
JavaScript模板引擎artTemplate.js——template()方法的更多相关文章
- JavaScript模板引擎artTemplate.js——template.compile()方法
template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...
- JavaScript模板引擎artTemplate.js——template.helper()方法
上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——是否编码输出html字符
template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
- JavaScript模板引擎artTemplate.js——引入子模板
之前的例子都是单一结构的对象,如果遇到复杂对象结构,我们可以通过引入子模板来实现html的渲染. 依旧以之前的数据作为例子: <div id="content">< ...
随机推荐
- $.extend()的深拷贝和浅拷贝详细讲解
版权声明:作者原创,转载请注明出处! 语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 描述: 将两个或更多对象的内容合并到第一个对象 ...
- 64位win7+vs2010编译.net3.5以前的版本问题
一般编译会出现 1.“ResGen.exe”已退出,代码为2 问题处理 2.“错误 2 “LC.exe”已退出,代码为 -1. NBGIS.MainGIS” 3.“未能加载文件或程序集“ESRI.Ar ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(五)地图切换以及图层显示模块
config.xml文件的配置如下: <widget right="20" top="55" config="widgets/MapSwitch ...
- Android开发6:Service的使用(简单音乐播放器的实现)
前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...
- 自定义控件之圆形的image
需要添加点击事件的的时候在自定义的控件中覆写OnTouchEvent():方法进行点击事件的分发 package com.example.administrator.mvp.ui.widget; im ...
- iOS RESideMenu 侧滑 第三方类库
下载地址:https://github.com/romaonthego/RESideMenu 效果如下:官方案例 自己的实现效果 具体代码下: AppDelegate.m文件中 - (BOOL)app ...
- Eclipse部署项目的原理简介eclipse,wtpwebapps,tomcat
转载请注明出处! http://www.cnblogs.com/libingbin/ 感谢您的阅读.如果文章对您有用,那么请轻轻点个赞,以资鼓励.
- ORA-14450: attempt to access a transactional temp table already in use
在ORACLE数据中修改会话级临时表时,有可能会遇到ORA-14550错误,那么为什么会话级全局临时表会报ORA-14450错误呢,如下所示,我们先从一个小小案例入手: 案例1: SQL> CR ...
- SQL SERVER 2005删除维护作业报错:The DELETE statement conflicted with the REFERENCE constraint "FK_subplan_job_id"
案例环境: 数据库版本: Microsoft SQL Server 2005 (Microsoft SQL Server 2005 - 9.00.5000.00 (X64) ) 案例介绍: 对一个数据 ...
- Python学习笔记2-解析数据
Import os; -- Python自带 print(os.getcwd()) -- 获得当前工作目录 os.chdir('/Users/longlong/Documents') -- 转换到/U ...