artTemplate-优秀的前端模板引擎

1.html中引入artTemplate的js文件:

 <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./artTemplate/template-native.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

2.html中编写模板script:

<script type="text/template" id="pointTemplate">
<% for(var i=0;i< list.length;i++){ %>
<li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
<% } %> </script> <script type="text/template" id="imageTemplate">
<% for(var i = 0 ; i < list.length ; i ++){ %>
<div class="item <%=i==0?'active':''%>">
<% if(isMobile){ %>
<a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a>
<% }else{ %>
<a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
<% } %>
</div>
<% } %> </script>

3.js代码中ajax请求获得数据:

 $.ajax({
type: 'get',
url: 'json/data.json',
dataType: 'json',
data: '',
success: function (data) {
var isMobile = $(window).width() < 768 ? true : false;
// 开始使用模板
var pointHtml = template('pointTemplate', {list: data});
var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});
// 把字符串渲染到页面中
$(".carousel-indicators").html(pointHtml);
$(".carousel-inner").html(imageHtml);
}
});

artTemplate-优秀的前端模板引擎的更多相关文章

  1. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  2. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  3. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  4. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  5. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  6. 前端模板引擎artTemplate.js

    . 关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为ha ...

  7. 必须掌握的前端模板引擎之art-template

    常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...

  8. JavaScript模板引擎artTemplate.js——为什么使用模板引擎?

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  9. 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...

随机推荐

  1. 端口模式(IN,OUT,INOUT,BUFFER)

    in: OUT: INOUT: BUFFER:缓冲模式,与OUT类似可作为输出使用,但也可把输出的信号作为输入使用.

  2. Spring3.x错误---- Cannot proxy target class because CGLIB2 is not available. Add CGLIB to the class path or specify proxy interfaces.

    Spring3.x错误: 解决方法: 缺少cglib的包, 下载地址: http://sourceforge.net/projects/cglib/files/latest/download?sour ...

  3. Tomcat 环境变量配置

    1.变量和常量 i 和 0 2.环境变量 cmd >set 查看所有环境变量 %PATH% 系统指定可执行文件的搜索路径,可以是 .exe .bat String path=“C:\WINDOW ...

  4. day04(权限修饰符,内部类,局部内部类,匿名内部类)

    权限修饰符, Public  >protected >default > private public 公共权限   随便都可以访问 protected  子类可以访问权限  (子类 ...

  5. C# 对接Https接口

    最近公司项目需要对接Https接口,将对接的代码整理如下: public void Get() { HttpWebRequest request = null; request = WebReques ...

  6. C# 动态生成Html地图文件

    public void GPSModel(string x, string y, string ss)//动态地图文件 { if (x.Contains("-") &&am ...

  7. 『原创』手把手教你搭建一个实用的油耗App(一)

    前言: 入行快10年,有点积蓄,三年前买了代步车.于是乎,汽车油耗开销就成了每个月都必须关注的问题.三年来,用过了无数油耗记录软件,比如最知名的“小熊油耗”,从第一次用,一直到最新一版,感觉越来越“臃 ...

  8. celery_消息队列

    http://www.cnblogs.com/wupeiqi/articles/8796552.html 一. celery 简介 Celery 是一个专注于实时处理和任务调度的分布式任务队列, 同时 ...

  9. POI(java 操作excel,word等)编程

    一.下载所需jar包 下载地址:http://poi.apache.org/download.html http://download.csdn.net/detail/likai22/534250 二 ...

  10. java入门——面向对象

    简介 对象具有自己的状态和行为: 描述一个对象具有什么状态和行为的过程叫做建模,不同的意图下我们对同一个事物的描述会产生不同的模型. 类 类描述一类对象的状态和行为的模板.可以把类想象成一个汽车设计图 ...