传统的client side js MVC 结构:
Model:
json object - mapping with PO from server side
View:
HTML + CSS
Controller:
Page object - 负责页面初始化逻辑(验证、事件绑定、json数据渲染到DOM),提交时,获取DOM的数据组装json。
Concrete Javascript Pattern :
把status 和 behavior 直接绑定到DOM element上。
jquery concrete framework:
http://github.com/hafriedlander/jquery.concrete
http://github.com/nkallen/effen/
前者42k,后者0.8k。
与直接在DOM element object上添加status or behavior相比,框架的好处是可以批量添加。
用例:
对于autocomplete组件,formatted data = data name; saved data= data id;
之前有一个实现是为了save data id,多加了一个 input hidden.
如果是concrete js pattern, 可以在这个input element 上直接保存数据。
effen + jquery.autocomplete test:
$('body').append('<div id="dom_test"><input id="month"/></div>');
var monthInput = $("#month");
monthInput.fn({
dataPair: function(){
if (arguments.length == 0) {
return this._data;
}
else {
this._data = arguments[0];
}
},
_data: []
});
monthInput.autocomplete(months, {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i, total){
if (data[0] == months[new Date().getMonth()])
return false;
return data[0].substring(0, 3);
},
formatResult: function(row){
return row[1];
}
});
monthInput.result(function(event, data, formatted){
var _data = data[0].split("|");
monthInput.fn("dataPair", _data);
console.dir(monthInput.fn("dataPair"));
});
已有 0 人发表留言,猛击->>这里<<-参与讨论
JavaEye推荐
文章来源:
http://sevenduan.javaeye.com/blog/503946