jCT 嵌入模板简化方案
程序员文章站
2022-07-14 17:06:42
...
本文代码在线演示
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();
})
上一篇： Mac下配置svn服务器
下一篇： CMake初探