#33

gallery/form/1.3/auth/field/field.js

@@ -164,24 +164,6 @@ KISSY.add('gallery/form/1.3/auth/field/field', function (S, Event, Base, JSON, D
             }
 
         },
-        /**
-         * 合并html的属性配置，比如获取required-msg，或者data-valid（不推荐使用）
-          * @private
-         */
-        _getMsgConfig:function(el){
-            if(!el) return {};
-            if (DOM.attr(el, CONFIG_NAME)) {
-                var cfg = DOM.attr(el, CONFIG_NAME);
-
-                cfg = Utils.toJSON(cfg);
-                //把所有伪属性都当作rule处理
-                var propertyConfig = {
-                    rules:cfg
-                };
-
-                config = S.merge(propertyConfig, config);
-            }
-        },
         add:function (name, rule, cfg) {
             var self = this,
                 _storage = self._storage;

gallery/form/1.3/butterfly/collection.js

@@ -1,5 +1,5 @@
-KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field) {
-    var EMPTY = '';
+KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field,SelectField) {
+    var EMPTY = '',$ = Node.all;
     /**
      * 表单的数据模块
      * @class Collection
@@ -10,28 +10,81 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field)
         Collection.superclass.constructor.apply(this, arguments);
     }
     S.extend(Collection, Base,{
+        /**
+         * 想集合添加Field或SelectField数据模型
+         * @param data
+         * @return {*}
+         */
         add:function(data){
             if(!S.isObject(data)) return false;
+            //字段name
             var name = data.name;
-            if(!name){
-                S.log('add():第一个参数缺少name值！');
-                return false;
-            }
+            //字段类型
+            var type = data.type;
+            //字段目标元素
+            var $target = data.target;
+            if(!name || !type || !$target) return false;
+
             var self = this;
-            debugger;
-            var Field = self.get('Field');
-            var fields = self.get('fields');
-            var field = self.field(name);
-            if(field == EMPTY){
+
+            //已经存在该字段直接返回该字段
+            if(self.isExist(name)) return self.field(name);
+
+            var field = EMPTY;
+
+            //为选择类型的数据模型
+            if(self.isSelectFieldType(type)){
+                name = $target.attr('name');
+                //通过name来获取元素集合
+                if(name){
+                    data.target = $(document.getElementsByName(name));
+                }
+
+                field = new SelectField(data);
+            }else{
                 field = new Field(data);
-                fields.push(field);
             }
+
+            //向集合添加字段数据模型
+            var fields = self.get('fields');
+            fields.push(field);
+
             return field;
         },
+        /**
+         * 是否是SelectField数据模型
+         * @param {String} type
+         * @return {Boolean}
+         */
+        isSelectFieldType:function(type){
+            var selectFieldTypes = ['radio','checkbox'];
+            if(!type) return false;
+            return S.inArray(type,selectFieldTypes);
+        },
+        /**
+         * collection中是否存在该字段的数据
+         * @param {String} name 字段名称
+         * @return {Boolean}
+         */
+        isExist:function(name){
+            if(!name) return false;
+            var self = this;
+            var fields = self.get('fields');
+            var field = self.field(name);
+            return field != EMPTY;
+        },
+        /**
+         * 从表单中删除一个字段
+         */
         remove: function(){
 
         },
-
+        /**
+         * 设置表单域的值
+         * @param {String} name 表单元素名
+         * @param {String | Object} data
+         * @return {*}
+         */
         field:function(name,data){
             if(!S.isString(name)) return false;
             var self = this;
@@ -44,8 +97,8 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field)
                     return true;
                 }
             });
-            if(S.isString(data)){
-                field.set('test',data);
+            if(S.isString(data)) {
+                field.set('value',data);
             }
             else if(S.isObject(data)){
                 S.each(data,function(v,k){
@@ -57,11 +110,12 @@ KISSY.add('gallery/form/1.3/butterfly/collection',function (S, Base, Node,Field)
     },{
         ATTRS:{
             Field:{value:Field},
+            SelectField:{value:SelectField},
             fields:{
                 value:[]
             },
             data:{value:EMPTY}
         }
     });
     return Collection;
-},{requires:['base', 'node','./field']});
+},{requires:['base', 'node','./field/base','./field/selectField']});

gallery/form/1.3/butterfly/field/base.js

@@ -0,0 +1,105 @@
+/**
+ *  模块名：gallery/form/1.3/butterfly/field，表单数据层模块，当数据发生变化时会自动更新表单视图
+ *
+ * @module butterfly
+ * @submodule butterfly-model
+ */
+
+KISSY.add('gallery/form/1.3/butterfly/field/base',function (S, Base, Node) {
+    var EMPTY = '';
+    /**
+     * 表单field的数据模块
+     * @class Field
+     * @constructor
+     */
+    function Field(config){
+        Field.superclass.constructor.call(this, config);
+        this._init();
+    }
+    S.extend(Field, Base,{
+        /**
+         * 初始化
+         * @private
+         */
+        _init:function(){
+            var self = this;
+            self._syncValue();
+        },
+        /**
+         * 改变表单字段的值
+         * @param value
+         * @return value
+         */
+        val:function(value){
+            var self = this;
+            if(!S.isUndefined(value)) self.set('value',value);
+            return self.get('value');
+        },
+        /**
+         * 验证表单字段
+         * @return {Boolean}
+         */
+        test:function(){
+            var self = this;
+            var authField = self.get('authField');
+            var isPass = true;
+            if(authField) isPass = authField.validate();
+            return isPass;
+        },
+        /**
+         * 监听事件，同步字段的值
+         * @private
+         */
+        _syncValue:function(){
+            var self = this;
+            var $target = self.get('target');
+            if(!$target || !$target.length) return false;
+            var syncValueEvents = self.get('syncEvents');
+            //监听需要同步的事件
+            $target.on(syncValueEvents,function(){
+                var val =$target.val();
+                self.val(val);
+                self.test();
+            })
+        }
+    },{ATTRS:{
+        /**
+         * 目标表单字段
+         */
+        target:{
+            value:EMPTY,
+            getter:function(v){
+                return S.Node.all(v);
+            }
+        },
+        /**
+         * 同步表单字段值的事件
+         */
+        syncEvents:{
+            value:'blur'
+        },
+        /**
+         * 字段类型
+         */
+        type:{value:EMPTY},
+        /**
+         * 字段名
+         */
+        name:{value:EMPTY},
+        /**
+         * 值
+         */
+        value:{
+            value:EMPTY,
+            setter:function(v){
+                var self = this;
+                var target = self.get('target');
+                if(target && target.length > 0) target.val(v);
+                return v;
+            }
+        },
+        //auth的验证字段
+        authField:{ value:EMPTY }
+    }});
+    return Field;
+},{requires:['base', 'node']});