不只演示了kissy的ajax方法,同时演示了kissy的模板方法(kissy的模板类没有包含在1.1.6的压缩包中,需要另外引入)
示例中的二个模板代码
tpls =['<div id="calendar">' +
'<h2 class="title"><%=name%>(<%=email%>)的日历</h2>' +
'<ul class="list">'+
'<% for ( var i = 0, l = entry.length; i < l; i++ ) { %>' +
'<li class="grid"><div class="date g-u"><%=entry[i].date%></div><div class="g-u"><h5 class="t"><%=entry[i].title%></h5><p class="content"><%=entry[i].content%></p></div></li>' +
"<% } %>"+
'</ul>'+
'<% if(testIf) { %>'+
'<p class="footer">这是第一个模板</p>' +
'<% } %>' +
'</div>',
//模板2
'<div id="calendar" class="tpl2">' +
'<h2 class="title"><%=name%>的日历</h2>' +
'<p>明河的email是:<strong><%=email%></strong></p>'+
'<ul class="list">'+
'<% for ( var i = 0, l = entry.length; i < l; i++ ) { %>' +
'<li><div class="date"><%=entry[i].date%></div><h5 class="t"><%=entry[i].title%></h5><p class="content"><%=entry[i].content%></p></li>' +
"<% } %>"+
'</ul>'+
'<% if(testIf) { %>'+
'<p class="footer">这是第二个模板</p>' +
'<% } %>' +
'</div>'];
xml处理过程
IO.get(url,function(data){
//title = data.getElementsByTagName('title').item(0).firstChild.data;
doc = DOM.children(data)[0];
author = getChildrenNode(doc,'author');
//日历作者名
name = DOM.text(DOM.children(author)[0]);
//作者邮箱
email = DOM.text(DOM.children(author)[1]);
//内容
entry = getChildrenNode(doc,'entry');
S.each(entry,function(elem){
item = {
date : new Date(DOM.text(getChildrenNode(elem,'published'))).format('yyyy-MM-dd hh:mm:ss'),
title : DOM.text(getChildrenNode(elem,'title')),
content : DOM.text(getChildrenNode(elem,'content'))
};
items.push(item);
});
testIf = true;
//输出模板
result = {'name':name,'email':email,'entry' : items,'testIf':testIf};
html = T(tpl).render(result);
DOM.html(cal,html);
},'xml')
模板引擎bug测试,请使用firebug查看下面的模板输出后的结构,再比对模板真实的结构。
<p><p><p>明河</p></p></p>
这是要输出的结构,而实际上模板却输出了下面错误的结构。
<p></p><p></p><p>明河</p><p></p><p></p>
也就是失去了嵌套的结构,这个bug只有在连续出现相同标签嵌套的情况下。
