<!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. PHP第四天 函数引用传值

    <?php function f1($p1,&$p2){ $p1++; $p2++; $result= $p1+ $p2; return $result;}$v1=10;$v2=20;$ ...

  2. Restrictions.like("字段field","%表达式exp%");

    Restrictions.like("字段field","%表达式exp%");用hql语句就是 from table where field like '%e ...

  3. MySQL常用增删改查等操作语句

    修改数据库的字符集    mysql>use mydb    mysql>alter database mydb character set utf8;创建数据库指定数据库的字符集    ...

  4. linux backtrace()详细使用说明，分析Segmentation fault

    linux backtrace()详细使用说明,分析Segmentation fault 在此之前,开发eCos应用程序时,经常碰到程序挂掉后,串口打印输出一大串让人看不懂的数据.今天才明白,原来这些 ...

  5. 通过分析反汇编还原 C 语言 if…else 结构

    让我们从反汇编的角度去分析并还原 C 语言的 if - else 结构,首先我们不看源代码,我们用 OllyDBG 载入 PE 文件,定位到 main 函数领空,如下图所示. 在图示中,我已经做好了关 ...

  6. Linux排序命令sort（转）

    Linux sort命令用于将文本文件内容加以排序.sort可针对文本文件的内容,以行为单位来排序. 语法 sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符&g ...

  7. JAVA版本号微信公众账号开源项目版本号公布-jeewx1.0（捷微）

    JeeWx, 敏捷微信开发,简称"捷微". 捷微是一款免费开源的微信公众账号开发平台. 平台介绍: 一.简单介绍 jeewx是一个开源,高效.敏捷的微信开发平台採用JAVA语言,它 ...

  8. 沁园春&#183;咏史

    沁园春·咏史 文/天地尘埃2020 谁是谁非?宋桧连金,武穆饮生. 叹止渴饮鸩.灰飞烟灭:诵传千载:长跪无声. 懿旨朱批?直书秉笔?天地一根秤自衡. 何曾忘! 这英雄千古,犹恨空横! 幽幽何觅忠魂.耻 ...

  9. Java 8 类型转换及改进

    为对象的类型做强制转换是一种很不好的设计.但在某些情况下,我们没有其它选择.Java自诞生的那一天起,就具备这样的功能. 我觉得Java 8在一定程度改善了这项古老的技术. 静态转型 Java中最经常 ...

  10. spring之注解（一）概述

    Spring的核心是依赖注入(DI),而依赖注入的基础是依赖信息的配置.这些配置称之为元数据. 在之前的的学习中.一直採用的是基于xml的配置,这些元数据配置在spring内部被注冊成为BeanDef ...