jCT 嵌入模板简化方案

jCT模板引擎简化应用

最新推荐文章于 2025-11-24 21:32:31 发布

最新推荐文章于 2025-11-24 21:32:31 发布 · 174 阅读

文章标签：

#Ajax #jQuery #SVN #JavaScript #数据结构 #ViewUI

jCT 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在单页面应用中简化jCT模板引擎使用的方法。通过一个自动工具函数walkjCT，可以在页面加载完成后自动解析并构建指定的jCT模板，无需额外配置模板ID。这种方式特别适用于数据和模板在同一页面的情况。

本文代码在线演示

http://jsct.googlecode.com/svn/trunk/jCT/example/index.html

中的简化模板:walkjCT

=================

最近一段时间和jCT的使用者有一些交流.

昨天突然想到一个问题:

我最初开发jCT的时候,想的就是如何和ajax配合使用.虽然jCT可以不和ajax配合,嵌入单页面也可以工作,可是我以前没有在嵌入单页面方向做一些针对性的工作.今天补上这篇文章.

jCT 嵌入模板简化方案 :适用于单页面 ,也就是数据,模板都在一个页面上

常见的结构伪代码:

<html>
<head>
<script src="jct.js"></script>
<script>
var data1={....};
var data2={....};
var data3={....};
</script>
</head>
<body>
<div>普通页面代码</div>
<div>
  <div>普通页面代码</div>
  <!---/*下面是jCT模板*/-->
  <!---for (var i in data1){-->
  <a href="+-data1[i].href-+">+-data1[i].text-+</a>
  <!---}-->
  <div>普通页面代码</div>
</div>
<div>普通页面代码</div>
  <!---/*下面是jCT模板*/-->
  <!---for (var i in data2){-->
  <a href="+-data2[i].href-+">+-data2[i].text-+</a>
  <!---}-->
<div>普通页面代码</div>
</body>
</html>

有些朋友也许看出来了,在这种最简单的模式下, 数据是全局的. 模板里面可能出现的javascript语句就是for和if了,其他的出现的几率很小(出现了也无所谓,jCT一样可以正确运行).

其实在这种情况下用

var ins=jCT(document.body.innerHTML);
document.body.innerHTML=ins.Build().GetView();

也可以简单的运行,不过这样写看上去有些不太友好,页面被全部重构了.

对于上面的html代码来说没有必要重构所有的页面,因为很明显需要模板的地方只有两处,而这两处都是位于body的某个子节点.仅仅把这两部分让jCT解析得到视图,重构就行了.

当然可以用定义ID之类方法了,不过如果这些琐碎的模板多的话就不方便了.

鉴于模板的规律性,其实可以写一个工具自动完成这个工作.

代码很简单

function walkjCT(node){
	if (undefined===node) node=document.body;
	var ins,n=node.firstChild;
	while(n){
		if(n.nodeType==8 && n.nodeValue.slice(0,1)=='-'){
			node.innerHTML=(new jCT(node.innerHTML)).Build().GetView();
			return;
		}
		if (n.nodeType==1)
			walkjCT(n);
		n=n.nextSibling;
	}
}

而这个函数只要在页面调入完成调用就可以了.比如

<body onload="walkjCT();">

//jQuery代码
$(function(){
walkjCT();
})