为了将数据库中的一组记录转换成HTML输出到界面上,大家都采用哪些做法呢?

在WebForm时代我们经常使用datagrid、repeater,当MVC问世后我们开始直接在视图上编写C#循环语句,而现在我更喜欢使用JavaScript模板引擎来生成HTML。因为这种做法的最大好处是实现了前后端代码的解耦,前端开发人员也无需了解太多的C#知识。

用法与示例:

第一步,在页面中引入JavaScript模板引擎:

function template(str, data) {
var strFunc =
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str.replace(/[\r\t\n]/g, " ")
.replace(/'(?=[^#]*#>)/g, "\t")
.split("'").join("\\'")
.split("\t").join("'")
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');";
func = new Function("obj", strFunc);
return func(data);
}

第二步,准备HTML模板:

<script type="text/html" id="temp_class">
<# for(var i=;i<datalist.length;i++){ #>
<div class="panle">
       课程编号:<#= datalist[i].ClassId #>
       课程名称:<#= datalist[i].ClassName #>
</div>
<# } #>
</script>

第三步,准备数据与输出HTML:

function loadPage() {
var classList = [
{ ClassName: "数据结构", ClassId: "", CreateOn: "2015-05-01 08:20:36", CreatedBy: "管理员"},
{ ClassName: "线性代数", ClassId: "", CreateOn: "2015-05-03 19:21:25", CreatedBy: "管理员"},
{ ClassName: "高等数学", ClassId: "", CreateOn: "2015-05-03 19:20:39", CreatedBy: "管理员"}
];
var strTempHTML = document.getElementById("temp_class").innerHTML;
document.getElementById("class_list").innerHTML = template(strTempHTML, { datalist: classList });
}

备注:classList对象是需要后端开发人员输出的,在MVC中我们可以直接使用ViewBag对象将后端变量输出到JavaScript代码中。

效果预览:

其它模板引擎介绍:Underscore.js

优点总结:

1、前端人员可以更加自由的对HTML结构进行更改,不再依赖后台开发。

2、模板语法支持if等JavaScript语法,用法简单,减小了代码复杂度。

3、HTML代码结构清晰,可阅读性强。

本文DEMO:下载地址

JavaScript模板引擎的使用的更多相关文章

  1. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  2. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

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

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

  4. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  5. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  6. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

  7. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  8. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  9. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  10. Juicer javascript 模板引擎

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...

随机推荐

  1. sqlserver2012——INTERSECT交查询

    1. select a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' 一般的查询 a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' order a. ...

  2. 转换为标准IPv4格式

    Insus.NET刚写了一个函数,把一个IP地址转换为标准格式,即每段位均是由3个数字组成. SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- = ...

  3. 大白话5分钟带你走进人工智能-第二十六节决策树系列之Cart回归树及其参数(5)

                                                    第二十六节决策树系列之Cart回归树及其参数(5) 上一节我们讲了不同的决策树对应的计算纯度的计算方法, ...

  4. 模拟一则ORA-600 [4194][][]故障并处理

    环境:OEL 5.7 + Oracle 11.2.0.3 1.模拟ORA-600 [4194][][]故障 2.使用bbed处理 3.尝试启动数据库 1.模拟ORA-600 [4194][][]故障 ...

  5. Scipy实现图片去噪

    先贴要处理的图片如下 由图片显示可知: # 图片中存在噪声点,白色的圆环# 圆环上的数据和圆环里面和外面不同,所以可以显示出肉眼可识别的图片# 波动# 存在噪声的地方,波动比较大 # 傅里叶变换可以将 ...

  6. Insert into a Binary Search Tree

    Given the root node of a binary search tree (BST) and a value to be inserted into the tree, insert t ...

  7. hdu1394(枚举/树状数组/线段树单点更新&区间求和)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意:给出一个循环数组,求其逆序对最少为多少: 思路:对于逆序对: 交换两个相邻数,逆序数 +1 ...

  8. poj1144 tarjan求割点

    poj1144 tarjan求割点 额,算法没什么好说的,只是这道题的读入非常恶心. 注意,当前点x是否是割点,与low[x]无关,只和low[son]和dfn[x]有关. 还有,默代码的时候记住分目 ...

  9. [Xcode 实际操作]六、媒体与动画-(16)实现音乐的背景播放

    目录:[Swift]Xcode实际操作 本文将演示音乐的背景播放功能 打开项目信息配置文件[info.plist]. 需要在配置文件中进行一些操作,使程序支持音乐的背景播放. 点击鼠标右键,弹出右键菜 ...

  10. VMWare虚拟机Windows下的下载与安装

    原文链接:http://www.studyshare.cn/blog-front//software/details/1161/0一.下载此处收集各种开发工具软件,供下载官网下载:https://ww ...