<!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. uni-app强大的前端框架，h5，原生app（两大系统），微信小程序

    最近发现一款强大的前端框架,它叫uni-app 这是一款通用的框架可以打包app,h5,微信小程序, 说说要弄这个工具需要会那些技能吧, 要熟悉vue,微信小程序.这样这个框架用的就是很快上手了 模块 ...

  2. BZOJ 3012: [Usaco2012 Dec]First! 字典树 + tarjan

    Code: #include<bits/stdc++.h> #define maxn 1000003 using namespace std; char str[maxn],strtot[ ...

  3. eas中删除原来的监听事件添加新的监听事件

    kdtEntrys.removeKDTEditListener(kdtEntrys.getListeners(KDTEditListener.class)[0]);  kdtEntrys.addKDT ...

  4. CSS模块化思想-----命名是个技术活

    CSS模块化思想(一)--------命名是个技术活 引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的 ...

  5. 洛谷P1579 哥德巴赫猜想（升级版）【水题+素数】

    1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约数的数,如2和11都是质数,而6不是质数,因为 ...

  6. Python中字符串操作函数string.split('str1')和string.join(ls)

    Python中的字符串操作函数split 和 join能够实现字符串和列表之间的简单转换, 使用 .split()可以将字符串中特定部分以多个字符的形式,存储成列表 def split(self, * ...

  7. Vue 项目的搭建

    1.已经安装node 2.vue init webpack --s 3.vue init webpack-simple my-webpack-simple-demo (创建的项目结构不完整)  web ...

  8. 《奋斗吧！菜鸟》 第八次作业：Alpha冲刺 Scrum meeting 4

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...

  9. ASP用户登录代码

    asp+access用户登录代码,其中huiyuan.mdb数据库名pUser213 表名y_username用户名字段,y_password密码字段. login.htm页面<head> ...

  10. JAVA反映机制A

    以下这个URL讲得不错,可以把概念和用途结合起来, 练练手: http://blog.csdn.net/xiaohai798/article/details/11640427 import java. ...