JavaScript模板引擎artTemplate.js——template.helper()方法
上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了。
<div id="user_info"></div>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="user_tmpl">
<div>姓名:<span>{{name}}</span></div>
<div>性别:
<span>{{if sex==0}}女{{else}}男{{/if}}</span>
</div>
<div>性别:<span>{{getSexName name sex}}</span></div>
<div>学校:<span>{{school}}</span></div>
</script>
<script type="text/javascript">
var data = {
name: "小明",
sex: 1,
school: "新华小学"
};
template.helper("getSexName", function(arg1, arg2) {
if (arg2 == "0") {
return "女" + arg1;
} else {
return "男" + arg1;
}
});
var user = template("user_tmpl", data);
document.getElementById("user_info").innerHTML = user;
</script>
我们注意到,最主要的区别在于调用。一个参数调用的写法可以是{{value | eventName}},多个参数则是{{eventName value01 value02}},并且单个参数也可以{{eventName value}}。可以传多个参数,为我们处理更加复杂的数据,提供了方便快捷的途径。
JavaScript模板引擎artTemplate.js——template.helper()方法的更多相关文章
- JavaScript模板引擎artTemplate.js——template.compile()方法
template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...
- JavaScript模板引擎artTemplate.js——template()方法
template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- 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">< ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
随机推荐
- 想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...
- 给 DevOps 初学者的入门指南
当我们谈到 DevOps 时,可能讨论的是:流程和管理,运维和自动化,架构和服务,以及文化和组织等等概念.那么,到底什么是"DevOps"呢? 什么是DevOps 随着软件发布迭代 ...
- UWP简单示例(二):快速开始你的3D编程
准备 IDE:Visual Studio 2015 了解并学习:SharpDx官方GitHub 推荐Demo:SharpDX_D3D12HelloWorld 第一节 世界 世界坐标系是一个特殊的坐标系 ...
- NopCommerce 在Category 显示Vendor List列表
实现效果如下: 1.在前台Web的Category Menu显示 Vendor; 2.点击Vendor 显示Vendor List列表: 主要配置步骤: 1.运行网站 Admin 后台 Categ ...
- WPF多源绑定
将控件绑定到多个数据源,ListBox绑定到一个集合,其中每一项绑定到集合中对象的两个属性,并对绑定进行了格式化. <ListBox ItemsSource="{StaticResou ...
- C语言实现2个大数相加。
#include<stdio.h>#include<string.h>int main(){ char s1[100],s2[100]; int num1[31], ...
- C++ STL简述
前言 最近要找工作,免不得要有一番笔试,今年好像突然就都流行在线笔试了,真是搞的我一塌糊涂.有的公司呢,不支持Python,Java我也不会,C有些数据结构又有些复杂,所以是时候把STL再看一遍了-不 ...
- app端上传文件至服务器后台,web端上传文件存储到服务器
1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...
- 仿喜马拉雅实现ListView添加头布局和脚布局
ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...
- 使用Nexus搭建Maven本地仓库
阅读目录 序 Nexus 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 在工作中可能存在有 ...