七段

无论怎样,请让我先感谢一下国家。

BlogJava 首页 新随笔 联系 聚合 管理
  35 Posts :: 2 Stories :: 7 Comments :: 0 Trackbacks
传统的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
posted on 2009-10-31 14:49 sevenduan 阅读(125) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: