如何做到结构与行为的分离

Question

w3c标准要求我们做到结构与行为分离；在jsp里面我们用

/logic:iterate
/logic:notEmpty

来迭代数据，如果把a标签里面onclick方法分离出来，那么方法里面的参数将如何获取？

Answer 1

html上只存数据，再用JS监听父容器，进行代理监听click事件，根据点击的节点来取数据。

将数据存于data:id中（data为namespace，防止冲突）
[code="html"]

[/code]

jQuery示例，这里简单的进行了代理，只监听父容器（因为事件会冒泡）
[code="js"]
var ct = $("dom_ct");
ct.click(function(e){
if($(e.target).is("a[data\:id]"){
viewProduct(e.target.getAttribute("data:id");
}
});
[/code]

上面的代码不能处理a标签有子节点的情况，加强版：
[code="js"]
var ct = $("dom_ct");
ct.click(function(e){
var dom = e.target;
while(dom && dom!==e.currentTarget){
if($(dom).is("a[data\:id]")){
console.log(dom.getAttribute("data:id"));
break;
}else{
dom = dom.parentNode;
}
}
});
[/code]