art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

下面介绍在项目中的使用方法,此处使用的时原生语法:

1.引入文件

<script src="../assets/artTemplate/template-native.js"></script>

2.1创建模板在HTML中(使用zepto或者jQuery对象遍历)

<script type="text/template" id="cartTemplate">
<% var $ = getZepto(); %>
<% $.each(data, function(i, item){ %>
<li class="mui-media">
<input type="checkbox" data-price="<%=item.price%>" data-num="<%=item.num%>">
</li>
<% }) %>
</script>

2.2创建模板在HTML中(使用js原生语法遍历)

<script type="text/template" id="cartTemplate">
<% for(var i=0; i<data.length; i++){ %>
<% var item = data[i] %>
<li class="mui-media">
<input type="checkbox" data-price="<%=item.price%>" data-num="<%=item.num%>">
</li>
<% } %>
</script>

3.导入数据,从接口获取数据data后直接放到template中,也可以使用对象eg:{list: data}代替data。(注意cartTemplate是模板id)

$('.mui-table-view').html(template('cartTemplate', data));

4.备注

4.1 art-template内部不能使用外部变量,如需使用外部变量可以使用template.helper(name, callback)方法。

4.2 比如2.1中使用了zepto对象,如何引入这个对象的呢?在你的js文件中添加下面的方法,然后在模板中调用一下就行了:(同样的方法也可引入jQuery或其他对象)

template.helper('getZepto', function (){
return Zepto;
});

art-template在项目中的应用的更多相关文章

  1. 如何决解项目中hibernate中多对多关系中对象转换json死循环

    先写一下原因吧!我是写的SSH项目,在项目中我遇到的问题是把分页对象(也就是pageBean对象)转化为json数据,下面为代码: public class PageBean <T>{// ...

  2. JAVA WEB项目中各种路径的获取

    JAVA WEB项目中各种路径的获取 标签: java webpath文件路径 2014-02-14 15:04 1746人阅读 评论(0) 收藏 举报  分类: JAVA开发(41)  1.可以在s ...

  3. 如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架

    一直准备写这么一篇有关 SSIS 日志系统的文章,但是发现很难一次写的很完整.因为这篇文章的内容可扩展的性太强,每多扩展一部分就意味着需要更多代码,示例和理论支撑.因此,我选择我觉得比较通用的 LOG ...

  4. Xamarin.Froms项目中包含的文件

    Clearly, the program created by the Xamarin.Forms template is very simple, so this is an excellent o ...

  5. 在VS项目中通过GIT生成版本号作为编译版本号

    上一篇博客写了如何在 .Net 项目使用 SVN 作为版本控制工具时生成与代码对应的组件版本号.虽然在公司一直使用 SVN ,但我却对 GIT 情有独钟(可能要归功于那段捣鼓 ROM 的时光),但少有 ...

  6. 在VS项目中使用SVN版本号作为编译版本号

    在实际项目中(特别是作为产品的项目),版本号是必不可少的一部分.版本号的规则也有许多种,在此不讨论具体的编码规范.对于迭代的产品,版本繁多,特别是有多个实施项目所使用产品的版本不同(基于定制需求)时, ...

  7. [转]C,C++开源项目中的100个Bugs

    [转]C,C++开源项目中的100个Bugs http://tonybai.com/2013/04/10/100-bugs-in-c-cpp-opensource-projects/ 俄罗斯OOO P ...

  8. 【C++模版之旅】项目中一次活用C++模板(traits)的经历

    曾经曾在一个项目中碰到过一个挺简单的问题,但一时又不能用普通常规的方法去非常好的解决,最后通过C++模板的活用,通过traits相对照较巧妙的攻克了这个问题.本文主要想重现问题发生,若干解决方式的比較 ...

  9. [翻译]在Django项目中添加谷歌统计(Google Analytics)

    原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...

  10. 如何在多个项目中分离Asp.Net Core Mvc的Controller和Areas

    前言 软件系统中总是希望做到松耦合,项目的组织形式也是一样,本篇文章将介绍在ASP.NET CORE MVC中怎么样将Controller与主网站项目进行分离,并且对Areas进行支持. 实践 1.新 ...

随机推荐

  1. multimap容器和multiset容器中的find操作

    前言 multimap容器是map容器的“ 增强版 ”,它允许一个键对应多个值.对于map容器来说,find函数将会返回第一个键值匹配元素所在处的迭代器.那么对于multimap容器来说,find函数 ...

  2. spring源码解析——2容器的基本实现(第2版笔记)

    感觉第二版写的略潦草,就是在第一版的基础上加上了新的流行特性,比如idea,springboot,但是,潦草痕迹遍布字里行间. 虽然换成了idea,但是很多截图还是eclipse的,如果不是看了第一版 ...

  3. GCJ Qualification Round 2016 B题

    经典的翻饼问题,直接做:从下往上看,已翻好的饼忽略掉:从上往下,连续的已翻好的一起翻过来:整个翻过来. /* * Author : ben */ #include <cstdio> #in ...

  4. EasyPusher手机直播推送是如何实现后台直播推送的

    本文由EasyDarwin开源团队成员John提供:http://blog.csdn.net/jyt0551/article/details/52276062 EasyPusher Android是使 ...

  5. CenterOS下搭建Hadoop环境

    检查防火墙状态 service iptables status 关闭防火墙 service iptables stop 查看防火墙开机启动状态 chkconfig iptables --list 关闭 ...

  6. request,session,application三者关系<转>

    几乎所有的Web开发语言都支持Session功能,Servlet也不例外. Servlet/JSP中的Session功能是通过作用域(scope)这个概念来实现的. 对象作用域为:  page  在当 ...

  7. MySQL常用语句汇总--持续更新(2017-08-10)

    修改表的字段结构: 表:mission_picture,新增字段:content,字段类型:text ALTER TABLE mission_picture ADD content text:

  8. 关于web页自动适配屏幕大小

    一.先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...

  9. java中String.valueOf(obj)、(String)obj与obj.toString()有什么区别

    方法1:采用 Object.toString()方法 在这种使用方法中,因为java.lang.Object类里已有public方法.toString(),所以对任何严格意义上的java对象都可以调用 ...

  10. Codeforces Beta Round #96 (Div. 1) C. Logo Turtle —— DP

    题目链接:http://codeforces.com/contest/132/problem/C C. Logo Turtle time limit per test 2 seconds memory ...