<!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. Day 2 语言元素

    1.变量和类型 在程序设计中,变量是一种存储数据的载体.计算机中的变量是实际存在的数据或者说是存储器中存储数据的一块内存空间,变量的值可以被读取和修改,这是所有计算和控制的基础.计算机能处理的数据有很 ...

  2. GDB调试工具、动态加载、内存管理（day04）

    一.程序中的错误处理 在系统中定义了一个全局变量errno.在这个全局变量中存放着系统调用或者库函数出错的信息(错误编号).然后根据错误编号获取错误信息. 举例说明: 打开一个文件,如果这个文件不存在 ...

  3. Linux—Ubuntu14.0.5安装gitlab

    1.下载gitlab-ce,到该连接选择版本   https://mirror.tuna.tsinghua.edu.cn/gitlab-ce/ubuntu/pool/trusty/main/g/git ...

  4. spi简介（自我理解）

    因为项目中用到spi总线,网上看了下资料,总感觉云山雾罩的,就向身边的同事问了下,他给我解释了下, 我现在把自己理解的写下来 spi一共四条线,一条选择线,一条数据线,2条数据线.spi是一对多设备, ...

  5. 1.git的安装和配置

    从git官网下一个git安装包.   点击git.exe安装程序,点击[next]   点击[next]   根据自己的需要可以把需要安装软件全选上,点击[next]   由于这是个人使用所以选择第二 ...

  6. oculus network error ovr53225466

    最近调试oculus,搬运代码到win10平台,发现最近FB对oculus的服务程序进行了更新,必须要登陆账号才能进行调试. 于是安装oculusclient,但是登陆的过程中出现了问题,如果不用代理 ...

  7. QuickTest Professional对web网站进行测试后没有生成脚本信息解决办法

    QTP是Quick Test Professional的简称,是一种自动测试工具.使用QTP的目的是想用它来执行重复的自动化测试,主要是用于回归测试和测试同一软件的新版本.因此你在测试前要考虑好如何对 ...

  8. Codeforces 1106F Lunar New Year and a Recursive Sequence (数学、线性代数、线性递推、数论、BSGS、扩展欧几里得算法)

    哎呀大水题..我写了一个多小时..好没救啊.. 数论板子X合一? 注意: 本文中变量名称区分大小写. 题意: 给一个\(n\)阶递推序列\(f_k=\prod^{n}_{i=1} f_{k-i}b_i ...

  9. 在做公司项目是时，昨天晚上还好的，但是第二天启动tomcat发现tomcat启动了，但是没把项目启动起来

    1.问题:在做公司项目是时,昨天晚上还好的,但是第二天启动tomcat发现tomcat启动了,但是没把项目启动起来 2.问题排除: 1)昨天晚上还好着呢,并且没改动代码,排除代码问题.日志中无报错信息 ...

  10. Something about 博弈（POJ 3922 A simple stone game）

    先是题目,本来是第三次训练的题,在这特别提出来讲. 先是题目: E - A simple stone game Time Limit:1000MS     Memory Limit:65536KB   ...