`
achun
  • 浏览: 313809 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

jCT 嵌入模板简化方案

    博客分类：
  • jCT
AjaxjQuerySVNJavaScript数据结构 
阅读更多

本文代码在线演示

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();
})

 

 

1
顶
0
踩
分享到：
| inEdit 的设计方法--inQueue
评论
2 楼 achun 2014-01-03  
jocce 写道
var data1={}；里面放的是json数据吗？为什么我用json格式的数据页面没有显示呢？

就是标准的js写法啊.
很久没有上博客了,今天才看到
1 楼 jocce 2013-09-02  
var data1={}；里面放的是json数据吗？为什么我用json格式的数据页面没有显示呢？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics