art-template在项目中的应用

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;
});

转载于:https://www.cnblogs.com/codebook/p/10070200.html

art-template在项目中的应用相关推荐

如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
开源许可证如何工作_开源许可证的工作方式以及如何将其添加到您的项目中...
开源许可证如何工作 by Radu Raicea 由Radu Raicea 开源许可证的工作方式以及如何将其添加到您的项目中 (How open source licenses work and h ...
Django项目准备和配置（MVT图解、创建项目和应用、更换解释器、安装应用、本地化、模板路径、项目中匹配urls、应用中匹配urls.py、准备视图、开启服务器、修改DATABAS配置信息）
Django模型主要包含: 模型配置数据的增删改增:book = BookInfo() book.save() 和BookInfo.objects.create() 删:book.delete() ...
vue-vue项目中mock.js的使用
mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
ionic 项目中添加modal的步骤流程
1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...
听说redux和react-redux在写项目中更配哦
最近,由于接触了React的项目,所以开始慢慢去学习关于React全家桶的一些内容,其中有一块内容用到的较为频繁,于是也开始恶补这方面的知识如标题所示,这篇文章就是关于redux & rea ...
Eigen 矩阵运算库在实际项目中的使用
Eigen 矩阵运算库在实际项目中的使用情况如何? 心血来潮,试了试纯模板技术写的 Eigen 并作了简单的性能测试,三个 1000 阶的方阵连乘运算 Eigen 比 MATLAB 快了一倍,比 Op ...
webpack结合reactjs、vuejs项目中图片处理
这篇文章主要整理一下自己在使用 webpack 结合 vuejs 或 reactjs 开发过程中图片的处理方法. 我的需求项目打包之后(假定输出目录为 dist),除了 index.html,将所有 ...

art-template在项目中的应用

art-template在项目中的应用相关推荐

最新文章

热门文章