<!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. 磁盘测试----fio

    测试前提 我们在进行测试时,都会分清楚: 测试对象:要区分硬盘.SSD.RAID.SAN.云硬盘等,因为它们有不同的特点 测试指标:IOPS和MBPS(吞吐率),下面会具体阐述 测试工具:Linux下 ...

  2. JS 常用语法

    通常,通过 JavaScript,您需要操作 HTML 元素. 1.通过 id 找到 HTML 元素 2.通过标签名找到 HTML 元素 3.通过类名找到 HTML 元素 提示:通过类名查找 HTML ...

  3. Co-prime

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem ...

  4. 通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据

    通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据\ 下文将重点说明通过Sqoop实现Mysql与HDFS互导数据,Mysql与Hbase,Oracle与Hbase的互 ...

  5. csu1395模拟

    #include<stdio.h> #include<string.h> #define N  10 char s[N][N][N]={{"***",&qu ...

  6. 译：滑雪租赁问题（ski rental problem）

         本文翻译自维基百科词条:http://en.wikipedia.org/wiki/Ski_rental_problem 滑雪租赁问题(ski rental problem)是一类问题的总称, ...

  7. servlet理解

    可得到一个结论:该JSP页面中的每个字符都由test1_jsp.java文件的输出流生成. 根据上面的JSP页面工作原理图,可以得到如下四个结论: — JSP文件必须在JSP服务器内运行. — JSP ...

  8. C#编程中,在页面上如何弹出确认删除对话框

    对于页面完成一个操作后,弹出一个对话框提示是否“操作成功”.举例如下:Response.Write("<script>alert('删除成功!')</script>& ...

  9. Data Binding Guide——google官方文档翻译（下）

    这篇博客是Data Binding Guide官网文档翻译的下篇.假设没看过前半部分翻译的能够先看Data Binding Guide--google官方文档翻译(上)  一,数据对象 不论什么不含业 ...

  10. 如何构建一个轻量级级的DI(依赖注入)

    概念:依赖注入与IOC模式类似工厂模式,是一种解决调用者和被调用者依赖耦合关系的模式:它解决了对象之间的依赖关系,使得对象只依赖IOC/DI容器,不再直接相互依赖,实现松耦合,然后在对象创建时,由IO ...