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

选择artTemplate的原因有两个：

1.使用简单，轻量级。

2.性能比较高。

 

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

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

 

于是便写了如下的Demo：

 

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

<!DOCTYPE html>

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

<head>

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

    <title>ArtTempTest</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

   1:  




   2:     <script src="JS/lib/template.js">




   1: </script>




   2:     <script src="JS/tempTest.js">




   1: </script>




   2: </head>




   3: <body>




   4:     <h2>ArtTemplate</h2>




   5:     <!--模板容器-->




   6:     <div id="container">




   7:     </div>




   8:     <!--使用script标签来当作模板标签，id为模板名-->




   9:     <!--数据对象名要与后台js定义的数据属性名称一致，如list-->




  10:     <script id="template" type="text/html">




  11:         <h3><%=title%></h3>




  12:         <ul id="mainContent">




  13:             <%for(i = 0; i < list.length; i ++) { %>




  14:         <li><dd>name: <span id="aName"></span> Category:<%=list[i].Category%> price:<%=list[i].Price%></dd></li>




  15:             <%}%>




  16:         </ul>




  17:     


</script>

</body>

</html>

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

 

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

$(document).ready(function () {

    // my test

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

       .done(function (data) {

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

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

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

           var tempData = [];

           tempData.list = data;

           tempData.title = "testTitle";

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

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

           //每行数据的事件绑定

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

               var tTr = this;

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

               //绑定事件

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

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

               aButton.click(function () {

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

               });

           });

       });

});

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

 

最终的呈现效果如下：

 

 

 

 

 

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

function GetData() {

 

    //获取许愿墙数据

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

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

 

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

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

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

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

 

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

 

            var tTr = this;

            var selectedItem = $.tmplItem(this);

 

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

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

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

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

 

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

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

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

 

            var getRandomColor = function () {

                return (function (m, s, c) {

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

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

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

            }

 

            var Color = getRandomColor();

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

 

            //绑定数据

            tmp_title.html(selectedItem.data.title);

            tmp_person.html(selectedItem.data.pubName);

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

 

            btnTitle.click(function () {

                var heart_date = "";

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

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

                }

                else {

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

                }

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

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

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

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

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

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

                //ShowBox

                this.href = "#heartInfo_content";

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

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

                showDialog();

            });

        });

    });

}

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. Nutch+Lucene搜索引擎开发实践

    网络拓扑 图 1 网络拓扑图 安装Java JDK 首先查看系统是否已经安装了其它版本号的JDK,假设有,先要把其它版本号的JDK卸载. 用root用户登录系统. # rpm-qa|grep gcj ...

  2. 批处理bat脚本编写（附详细例子）

                                                        批处理bat脚本编写(附详细例子) 由于在项目开发的过程中经常需要编写bat脚本,而看大牛们编写 ...

  3. [视频解说]0基础课程-运营商-Java它J2se

    本节解说 运营商应用 Java 算被分成: 算术运算符 颂值运营商 逻辑运算符 位运算符 元运算符 这里录制了 视频解说这几大类运算符,并有练习题提供大家 面试题: 1. 最有效率的方式算出2乘以8等 ...

  4. Net Memory Profiler 分析.Net程序内存泄露

    Net Memory Profiler 分析.Net程序内存泄露 Haozes's Tech Space 人類的全部才能無非是時間和耐心的混合物 使用.Net Memory Profiler 分析.N ...

  5. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  6. ODPS 下一个map / reduce 准备

    阿里接到一个电话说练习和比赛智能二选一, 真的很伤心, 练习之前积极老龄化的权利. 要总结ODPS下一个 写map / reduce 并进行购买预测过程. 首先这里的hadoop输入输出都是表的形式, ...

  7. virus.win32.parite.H查杀病毒的方法

    virus.win32.parite.H病毒的查杀方法 昨天电脑中了virus.win32.parite.H病毒,搞了2个多小时最终搞定了.以下记录下我的解决方法. 第一步:下载Win32.Parit ...

  8. [LeetCode290]Word Pattern

    题目: Given a pattern and a string str, find if str follows the same pattern. Here follow means a full ...

  9. RH033读书笔记(10)-Lab 11 Process Control

    Lab 11 Process Control Sequence 1: Job Control 1. [student@stationX ~]$ su - 2. Begin some jobs in t ...

  10. Object-C 新手教程

    大纲 開始吧 下载这篇教学 设定环境 前言 编译 hello world 创建 Classes @interface @implementation 把它们凑在一起 具体说明... 多重參数 建构子( ...