arttemplate.js简洁写法案例

<!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>
时间: 2024-10-16 22:32:08

arttemplate.js简洁写法案例的相关文章

arttemplate.js原生写法案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"></div> <script type="text/template" id=&q

ViewHolder模式简洁写法

参考网址:http://blog.csdn.net/hmily7532361/article/details/18368235 在安卓中 自定义Adapter时,使用ViewHolder可缓存每个Item的View,减少一些不必要的操作,提高性能.在网上看到一种比较简洁的写法,避免每个自定义的Adapter定义ViewHolder实体类. import android.util.SparseArray; import android.view.View; /** * * @类名 ViewHold

android中ViewHolder通用简洁写法

public class ViewHolder {     // I added a generic return type to reduce the casting noise in client code     @SuppressWarnings("unchecked")     public static <T extends View> T get(View view, int id) {         SparseArray<View> view

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

再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是由此自己写了一份简单的artTemplate.js的总结. 由于这次是工作期间匆忙中写的,所以有些不完善的地方,后续会继续补充的.

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

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

iOS开发——网络开发OC篇&amp;OC与JS交互简单案例

OC与JS交互简单案例 网页开发中三个重要的知识,这里就不详细介绍了! Html:页面代码 Css:样式 javascript:响应 先来看一段html的简单代码,里面涉及了上面的三个部分(很简单) 1 <html> 2 <!--描述网页信息--> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>hello world</title> 6 <script> 7 f

js简易写法

我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本专门讨论它的书,然而,我现在依然能发现一些关于这种语言的新知识.下面的描述的就是过去让我不由得发出“啊!”的感叹的编程技巧,这些技巧你应该现在就试试,而不是等着未来的某个时候偶然的发现它们. 简洁写法 JavaScript里我最喜欢的一种东西就是生成对象和数组的简写方法.在过去,如果你想创建一个对象

ViewHolder简洁写法

ViewHolder holder = null;         if(convertView == null){                 convertView = mInflater.inflate(R.layout.xxx null);                 holder = new ViewHolder();                 holder.tvXXX = (TextView)findViewById(R.id.xxx);                

JS特殊写法

记录下工作中碰到的JS特殊写法 (function(index) { $('#' + id).on("change", function() { me.onChange(this, index); }) })(i); 等同于 var fnName= function( index ){ $('#' + id).on("change", function() { me.onChange(this, index); }) } fnName(i); 原文地址:https: