<!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简洁写法案例的更多相关文章

  1. arttemplate.js原生写法案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  3. JavaScript模板引擎artTemplate.js——两种方法实现性别的判定

    template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...

  4. JavaScript模板引擎artTemplate.js——结语

    再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...

  5. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  6. ViewHolder简洁写法

    ViewHolder holder = null;         if(convertView == null){                 convertView = mInflater.i ...

  7. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  8. js简易写法

    我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本 ...

  9. JS文件写法操作，DOM基本操作

     js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...

随机推荐

  1. java源码

    Java泛型中的标记符含义: K - Key(键) V - Value(值) E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类,可做泛型) N - Nu ...

  2. Android内存优化————加载长图

    项目中总会遇到加载长图的需求,图片的长度可能是手机长度的很多倍,也就是需要通过滑动来查看图片.比较简单的实现方式就是使用ScrollView来加载长图,但是这样做有一个很严重的问题,就是内存消耗严重. ...

  3. Java 各级注解及@Autowired注入为null解决办法

    1.@controller 控制器 用于标注控制层,相当于struts中的action层. 2.@service 服务层 用于标注服务层,主要用来进行业务的逻辑处理. 3.@repository DA ...

  4. [接口管理平台] eoLinker AMS 专业版 V3.5 ：加入数据结构管理、通用函数管理、API 快速测试等近 30 项更新

    eoLinker AMS是集API文档管理.API自动化测试.开发协作三位一体的综合API开发管理平台,是中国最大的在线API管理平台.目前eoLinker AMS已经为来自全球的超过两万家企业托管超 ...

  5. JDBC对MySQL数据库存储过程的调用

    一.MySQL数据库存储过程: 1.什么是存储过程 存储过程(英文:Stored Procedure)是在大型数据库系统中,为了完成特定功能而编写的一组的SQL语句集.存储过程经编译存储在数据库中,用 ...

  6. Linux思维导图之inode、mv、cp和硬软链接

    标准I / O和管道:     ps aux进程管理命令(和win任务管理器一样);     当前命令行输出窗口,键盘的输入即是标准输入.标准输出就是执行了的命令,无法执行的命令或错误信息是标准错误, ...

  7. 【hihocoder 1476】矩形计数

    [题目链接]:http://hihocoder.com/problemset/problem/1476 [题意] [题解] 首先不考虑黑格子,计算出一共有多少个矩形: 枚举矩形的大小r×c,这样大小的 ...

  8. Spring Boot学习总结（3）——SpringBoot魅力所在

    使用Java做Web应用开发已经有近20年的历史了,从最初的Servlet1.0一步步演化到现在如此多的框架,库以及整个生态系统.经过这么长时间的发展,Java作为一个成熟的语言,也演化出了非常成熟的 ...

  9. 2-SAT·hihoCoder音乐节

    2-SAT·hihoCoder音乐节 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder音乐节由hihoCoder赞助商大力主办,邀请了众多嘉宾和知名乐队 ...

  10. HDU - 2973 - YAPTCHA

    先上题目: YAPTCHA Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...