jCT 使用教程之[嵌入模板]

achun

浏览: 306458 次
性别:
来自: 河南郑州

最近访客更多访客>>

u012363178

Nicksxs

Dreamall

adoijay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

我的资讯 ( 13)
我的论坛 ( 408)
我的问答 ( 123)

存档分类

博客分类：

jQuery JavaScript HTML SVN XHTML

更多信息请看我博客里的jCT专题，或者jCT开源主页示例里面有最简单的例子

此教程是适用于jCT3版

为了书写方便例子中引用了jQuery库,为了方便不对样式进行控制

嵌入模板: 模板代码直接在最终的html页,经过jCT实例化后,重新表现在原页面上,这是最简单的一种用法

例1: 字母菜单,有些应用中需要快速的用字母A-Z做快速搜索,我们用jCT实现

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jct.js"></script>
<script type="text/javascript">
$().ready(function(){
  var Instance = new jCT($('#abcnav').html());
  Instance.Build();
  $('#abcnav').html(Instance.GetView());
});
</script>
</head>
<body>
<ul id="abcnav">
	<!---for(var i=65;i<=90;i++){-->
	<li><span>+-String.fromCharCode(i)-+</span></li>
	<!---}-->
</ul>
</body>
</html>

从这个例子里,可以看出jCT的使用步骤

获取模板源代码:
```
$('#abcnav').html();
```

得到jCT实例

var Instance = new jCT($('#abcnav').html());

实例自构建
```
Instance.Build();
```
由实例得到视图
```
Instance.GetView()
```
把视图放置到具体的页面中
```
$('#abcnav').html(Instance.GetView());
```

基本上就是这些步骤了,而事实上如果用jQuery的话一句就可以做好所有这些步骤

$('#abcnav').html(new jCT($('#abcnav').html()).Build().GetView());

分享到：

jCT 在实战中洗礼,jCT要成为终极的javascri ... | js模板编译器jCT,推荐/问题贴

2008-09-02 11:20
浏览 2439
评论(3)
论坛回复 / 浏览 (2 / 2931)
分类:Web前端
查看更多

3 楼 achun 2008-09-14

<p>还是google code写示例方便，写了3个最简单的嵌入模板的例子,例子很简单但是却完全表现出了jCT使用中的3种方法.其中第3中方法也是我推荐的方法，这个方法太灵活了。</p>
<p>用这个方法后可以把要扩展的对象定义写到独立的js文件里，这样模板文件主要负责样式问题，交由美工做，js交由js程序员做。</p>
<p><a href='http://jsct.googlecode.com/svn/trunk/jCT/example/example1.html' target='_blank'>http://jsct.googlecode.com/svn/trunk/jCT/example/example1.html</a></p>

2 楼 achun 2008-09-09

<p><span style='font-size: small;'>现在我们把这简单的事情换另外一种写法</span></p>
<p> </p>
<pre name='code' class='html'><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jct.js"></script>
<script type="text/javascript">
$().ready(function(){
var Instance = new jCT($('#abcnav').html()).Build();
});
</script>
</head>
<body>
<ul id="abcnav">
    
   
    <li><span>+-String.fromCharCode(i)-+</span></li>
    
</ul>
</body>
</html></pre>
<p><span style='font-size: small;'>就是jCT文法用来定义成员方法的写法,对于上面的写法就是定义了一个RunNow的方法,这个方法里的内容是用来控制视图在页面上的具体表现的.</span></p>
<p><span style='font-size: small;'>且RunNow方法具有自动执行特性,用这种方法达到了模板在页面上的表现直接写到了模板代码当中.</span></p>

1 楼 robbenmu 2008-09-02

非常不错，支持下

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论