对于一个图库来说, 导航是非常重要的
利用 AJAX 技术可以让导航更加人性化,更快的找到需要的位置.

下面就用一个简单的数据表,模拟图库的导航.

{{{
model.py
class Images(SQLObject):
name = StringCol(unique=True,notNone=True)
time = DateTimeCol(alternateID=True,unique=True,notNone=True
}}}
这个简单的表只定义了两个字段(name和time, 分别代表路径与更新时间),但已经可以说明问题了

{{{
gal.py
class Gallery(controllers.Controller):
@expose(template="t.templates.fy")
def index(self):
dt = datetime.now()
tab = Images
img = tab.select(tab.q.time < = dt,
orderBy=tab.q.time).reversed()[0]
return dict(image=img)
}}}
index页面,返回最新的图片.

{{{
# 一次读取定长的列表，用于AJAX
@expose(template="json")
def prevlist(self, n):
t = parse_datetime(n) #将图片名转化为时间方便数据库的查询
tab = Images
prev_bunch = tab.select(tab.q.time < t,
orderBy=tab.q.time).reversed()[:Bunch_Size]
return dict(list=prev_bunch)
}}}
根据当前图片查询之前一定数量的图片.

在''config/app.cfg''中加入
tg.mochikit_all = True
让所有的tg页面默认加载MochiKit

{{{
gal.kid <js部分>
function prev_more () {
var image_name = scrapeText("image");
var p = loadJSONDoc("${std.url('/gal/prevlist?n=')}" + image_name);
p.addCallback(list_more);
};
function list_more (output) {
var list = UL(null, map(row_display, output["list"]));
replaceChildNodes("prevlist", list);
};
function row_display(image) {
var updateImage = function() {
replaceChildNodes("fyimg", image['name'])
};
return LI(null,
A({"href":"#", "onclick" : updateImage},
image["name"]));
};
}}}
{{{
gal.kid <body部分>
<div id="image" py:content="image.name">在这里显示图片</div>
<div>
<div>
<a href="#" onclick="return prev_more()" id="prevmore"><<</a>
<div id="prevlist"></div>
</div>
</div>
}}}
点击 “prevmore” 会调用prev_more()函数.
prev_more() ::
先通过url调用 server上的prevlist(),得到json格式的输出(可以通过”/gal/prevlist?n=%name”查看).
然后使用addCallback()将输出json定向到list_more()函数

list_more() ::
使用字典的方式处理json的输出信息,再通过mochikit的DOM模块更新网页.

这里只是一个简单的使用json的异步更新的例子,AJAX的内容还有很多很多,慢慢学吧.
下一步应该是学学ui这方面吧~