之前写JS绑定数据曾经用过tmpl库，虽然功能比较强大但是感觉不是很轻量，对于相对简单的数据需求显得有些臃肿。而Ajax返回数据自己拼接html的方式又显得不够高端，因此今天看了一篇介绍artTemplate的文章，觉得还不错，便来体验试用一下。

选择artTemplate的原因有两个：

1.使用简单，轻量级。

2.性能比较高。

 

使用方式和tmpl类似，只需指定一个容器div和一个模板代码，JS执行一个方法就可以实现绑定。

性能的话根据 高性能JavaScript模板引擎原理解析 提到的低版本浏览器使用数组push的方式，现代浏览器使用+=的方式性能更高，觉得性能应该还不错，而且有报错提示。

 

于是便写了如下的Demo：

 

首先，先感受一下前台的数据展现：

  1. <!DOCTYPE html>

  1. <html xmlns="http://www.w3.org/1999/xhtml">

  1. <head>

  1.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  1.     <title>ArtTempTest</title>

  1.     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  2.    1:  
  4.    2:     <script src="JS/lib/template.js">
  6.    1: </script>
  8.    2:     <script src="JS/tempTest.js">
  10.    1: </script>
  12.    2: </head>
  14.    3: <body>
  16.    4:     <h2>ArtTemplate</h2>
  18.    5:     <!--模板容器-->
  20.    6:     <div id="container">
  22.    7:     </div>
  24.    8:     <!--使用script标签来当作模板标签，id为模板名-->
  26.    9:     <!--数据对象名要与后台js定义的数据属性名称一致，如list-->
  28.   10:     <script id="template" type="text/html">
  30.   11:         <h3><%=title%></h3>
  32.   12:         <ul id="mainContent">
  34.   13:             <%for(i = 0; i < list.length; i ++) { %>
  36.   14:         <li><dd>name: <span id="aName"></span> Category:<%=list[i].Category%> price:<%=list[i].Price%></dd></li>
  38.   15:             <%}%>
  40.   16:         </ul>
  42.   17:     
  43. </script>

  1. </body>

  1. </html>

值得注意的是绑定数据的时候需要自己写个for循环，放在<% %>里，有种写.net代码的风格和亲切感~

 

后台的js代码是核心的数据绑定部分：

  1. $(document).ready(function () {

  1.     // my test

  1.     $.getJSON('api/products/mytest')

  1.        .done(function (data) {

  1.            //alert(JSON.stringify(data));

  1.            //构造前台数据，构造数据的变量名可随意起，前台只对应tempdata的各个属性名。

  1.            //所以再简单的json外面也要套一个tempdata，否则前台无法访问

  1.            var tempData = [];

  1.            tempData.list = data;

  1.            tempData.title = "testTitle";

  1.            var html = template.render('template', tempData);

  1.            document.getElementById('container').innerHTML = html;

  1.            //每行数据的事件绑定

  1.            $("#mainContent").children("li").each(function (index) {//获取模板div的第一个孩子节点，注意层次关系，其间不要穿插其他元素

  1.                var tTr = this;

  1.                var selectedItem = tempData.list[index];//获取当前行数据对象，暂时使用数据索引方式访问。

  1.                //绑定事件

  1.                var aButton = $(tTr).find("#aName");

  1.                aButton.append("<a href='#'>" + selectedItem.Name + "</a>");

  1.                aButton.click(function () {

  1.                    alert(selectedItem.Name + "的Category是：" + selectedItem.Category);

  1.                });

  1.            });

  1.        });

  1. });

其中需要注意的地方均在注释中进行了说明。唯一的不方便之处就是对于每一行数据事件的支持以及获取当前行数据的方式，没有tmpl里简单，还需要自己指定数据源对象，通过索引的方式来访问。

 

最终的呈现效果如下：

 

 

 

 

 

P.S. 附上一段使用tmpl的代码示例：

  1. function GetData() {

  1.  

  1.     //获取许愿墙数据

  1.     $.get(ControllerPath + "Heart/GetAllHeart", {}, function (data) {

  1.         $("#content_loading").hide();//fadeOut(100);

  1.  

  1.         var jsonData = eval("(" + data + ")");

  1.         //alert(jsonData.table[1].title);

  1.         $("#ItemList").empty();

  1.         RenderTemplatefunction($("#ItemList"), $("#ItemTemplate"), jsonData.table);

  1.  

  1.         $("#ItemList").children("dd").each(function (index) {

  1.  

  1.             var tTr = this;

  1.             var selectedItem = $.tmplItem(this);

  1.  

  1.             var tmp_title = $(tTr).find("#item_title");

  1.             var tmp_person = $(tTr).find("#item_person");

  1.             var tmp_date = $(tTr).find("#item_date");

  1.             var btnTitle = $(tTr).find("#btnTitle");

  1.  

  1.             var bgNumber = "it" + Math.floor(Math.random() * 10 + 9) + ".jpg"; //1-10的随机数

  1.             var bg = $(tTr).find(".bg");

  1.             bg.css('background-image', "url('../Content/img/bg/" + bgNumber + "')");

  1.  

  1.             var getRandomColor = function () {

  1.                 return (function (m, s, c) {

  1.                     return (c ? arguments.callee(m, s, c - 1) : '#') +

  1.                         s[m.floor(m.random() * 16)]

  1.                 })(Math, '0123456789abcdef', 5)

  1.             }

  1.  

  1.             var Color = getRandomColor();

  1.             $(tTr).find("#item_title").css('color', Color.toString());

  1.  

  1.             //绑定数据

  1.             tmp_title.html(selectedItem.data.title);

  1.             tmp_person.html(selectedItem.data.pubName);

  1.             tmp_date.html(selectedItem.data.addDate.toString().split(' ')[0].replaceAll('/', '-').toString());

  1.  

  1.             btnTitle.click(function () {

  1.                 var heart_date = "";

  1.                 if (selectedItem.data.beginDate.toString() == selectedItem.data.endDate.toString()) {

  1.                     heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-');

  1.                 }

  1.                 else {

  1.                     heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') + " 至 " + selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');

  1.                 }

  1.                 $("#heart_title").html(selectedItem.data.title);

  1.                 $("#heart_content").html(selectedItem.data.content);

  1.                 $("#heart_date").html(heart_date);

  1.                 $("#heart_person").html(selectedItem.data.participator);

  1.                 $("#heart_contact").html(selectedItem.data.contact);

  1.                 $("#heatr_puber").html(selectedItem.data.pubName);

  1.                 //ShowBox

  1.                 this.href = "#heartInfo_content";

  1.                 $(this).addClass("heartInfo_inline");

  1.                 $("#heartInfo_content").show();

  1.                 showDialog();

  1.             });

  1.         });

  1.     });

  1. }

JS数据绑定模板artTemplate试用的更多相关文章

  1. js数据绑定(模板引擎原理)

    <div> <ul id="list"> <li>11111111111</li> <li>22222222222< ...

  2. JS之模板技术（aui / artTemplate）

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...

  3. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  4. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  5. js使用模板快速填充数据

    1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...

  6. js 简单模板引擎

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  7. js模板 arttemplate 让数据与html分离

    js模板引擎 前后交互过程中最麻烦的就是如何将json数据展示到页面中,循环拼接html的方法实在是太low了,饱受其苦,BAT同样会遇到这样的问题,于是乎就有个各自的js模板引擎,目的只有一个:让数 ...

  8. Vue.js双向数据绑定模板渲染

    准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> & ...

  9. 前端模板artTemplate，handlerbars的使用心得

    写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故. 1,artTemplate 优点: 1,一般web端用得较多,执行速度通常是 Mustache ...

随机推荐

  1. composite template 组合模式

      1. 主要优点 组合模式的主要优点如下: (1) 组合模式可以清楚地定义分层次的复杂对象,表示对象的全部或部分层次,它让客户端忽略了层次的差异,方便对整个层次结构进行控制. (2) 客户端可以一致 ...

  2. POJ2239 Selecting Courses【二部图最大匹配】

    主题链接: http://poj.org/problem?id=2239 题目大意: 学校总共同拥有N门课程,而且学校规定每天上12节可,一周上7天. 给你每门课每周上的次数,和哪一天哪一节 课上的. ...

  3. 采用Eclipse中间Maven构建Web项目错误（一）

    采用Eclipse中间Maven构建Web工程 1.在进行上述操作时.pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  4. 3、Spring4之Bean 配置的细节

    1). 若字面值中包括特殊字符,则能够使用 value 节点的 <![CDATA[]]> 把字面值包裹起来.      <constructor-arg>           ...

  5. DFA和trie特里实现敏感词过滤（python和c语言）

    今天的项目是与完成python开展,需要使用做关键词检查,筛选分类,使用前c语言做这种事情.有了线索,非常高效,内存小了,检查快. 到达python在,第一个想法是pip基于外观的c语言python特 ...

  6. 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern)

    原文:乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) 作者:weba ...

  7. 构造函数为什么不能为虚函数 &amp; 基类的析构函数为什么要为虚函数

    一.构造函数为什么不能为虚函数 1. 从存储空间角度,虚函数相应一个指向vtable虚函数表的指针,这大家都知道,但是这个指向vtable的指针事实上是存储在对象的内存空间的.问题出来了,假设构造函数 ...

  8. Android - 数据存储 －存储键值对

    如果你有少量的键值数据需要存储,可以使用SharedPreferencesAPI.SharedPreferences对象指向一个包含键值对的文件并且提供了一些简单的方法来读取它们.每个SharedPr ...

  9. MySQL InnoDB数据库备份与还原

    备份 进入cm黑窗口 输入下列命令 mysqldump -u 用户名 -p 数据库名称> c:\11.sql 回车执行 恢复 进入cm黑窗口 输入下列命令 mysql>use dbtest ...

  10. jconsole 连接 eclipse启动项

    eclipse 启动java项目默认情况下不开启jmx远程观看,假设需要看看内存使用情况对项目执行的线程等信息,能eclipse添加启动参数: -Dcom.sun.management.jmxremo ...