arttemplate.js简洁写法案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简介语法</title>
</head>
<body>
<div id="box"></div>
<!--**注意** 模版当中没有其他全局变量 -->
<!--
<% for(var i = 0 ; i < model.length ; i ++){ %>
<%=model[i].name%>今年<%=model[i].age%><br>
<% }; %>
-->
<!--
{{ each model as value i }}
{{value.name}}今年{{value.age}}<br>
{{/each}}
-->
<script type="text/template" id="box_template">
{{ each model}}
{{$index}} {{$value.name}}今年{{$value.age}}<br>
{{/each}}
</script>
<!--原生语法的js native-->
<script src="js/template.js"></script>
<script src="js/jquery.min.js"></script>
<script>
/*1.准备数据*/
var dataList = [
{name:'xgg',age:'10'},
{name:'xgg',age:'12'},
{name:'xgg',age:'13'},
{name:'xgg',age:'14'},
{name:'xgg',age:'18'}
]
/*2.转化数据成html*/
var html = template('box_template',{model:dataList});
/*3.渲染*/
document.querySelector('#box').innerHTML = html;
</script>
</body>
</html>
arttemplate.js简洁写法案例的更多相关文章
- arttemplate.js原生写法案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎？
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- ViewHolder简洁写法
ViewHolder holder = null; if(convertView == null){ convertView = mInflater.i ...
- chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- js简易写法
我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本 ...
- JS文件写法操作，DOM基本操作
js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...
随机推荐
- Jmeter JSON断言和响应断言的区别是什么？
假设响应数据是{"code":0,"datas":{"informationStatus":1}} 响应断言:"code" ...
- 浅析Python3中的bytes和str类型 (转)
原文出处:https://www.cnblogs.com/chownjy/p/6625299.html#undefined Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文 ...
- 小程序text组件内部上边距的问题
index.wxml: <view class="slogan"> <text> 建立跨文化的全球视野,做世界公民 </text> </v ...
- BZOJ 1060: [ZJOI2007]时态同步 树上问题 + 贪心
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
- eas之设置编辑界面分录的某一列不可编辑
KDTEntrys.getColumn(“xx”).getStayAttributes().setlokced(true);
- MAC下redis的安装和配置
1.下载 打开官网:https://redis.io/ 选择下载你要的版本压缩包 2.安装 打开终端,cd - 将下载的压缩包拷贝到local目录下:sudo cp Downloads/redis-4 ...
- 数位dp题集
题集见大佬博客 不要62 入门题,检验刚才自己有没有看懂 注意一些细节. 的确挺套路的 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...
- AtCoder ABC 070D - Transit Tree Path
传送门:http://abc070.contest.atcoder.jp/tasks/abc070_d 本题是一个图论问题——树(Tree). 有一棵结点数目为n的无向树.第i条边连接结点ai与bi, ...
- lunix下的redis数据库操作——hash（哈希）
哈希,形如:key : (field : value) 创建:(可以理解为users用户,name为xxx) hset users name xxx 查看: hget users name # &qu ...
- 教你 Shiro + SpringBoot 整合 JWT
本篇文章将教大家在 shiro + springBoot 的基础上整合 JWT (JSON Web Token) 如果对 shiro 如何整合 springBoot 还不了解的可以先去看我的上一篇文章 ...