webix的Form绑定支持数组Array

绑定的原理

form.setValues:把树形对象，压平展开成一维的。比如：

var data = {
    id: 11,
    name: {
        first: 'alex',
        last: 'wu'
    }
};

var dataCollapsed = {
    id: 11,
    name.first: 'alex',
    name.last: 'wu'
};

压平之后，再根据key去赋值。

同理，form.getValues:是逆过程，把一维的数组合成树形结构。

核心代码是webix.CodeParser.collapseNames/expandNames，一看就明白。压平展开collapseNames是个很好的递归的例子；合成树形expandNames则是双层循环。

支持数组Array绑定

但webix的实现里不支持数组，WPF是支持的、Vue.js也支持。而且实际的场景里，有时确实需要将数组压平展示，datatable之类的列表虽然强大，但看多了有点傻。改了下webix的源码，如下：

webix.CodeParser = {
	//converts a complex object into an object with primitives properties
	collapseNames:function(base, prefix, data){
		data = data || {};
		prefix = prefix || "";

		if(!base || typeof base != "object")
			return null;

		for(var prop in base){
			if(base[prop] && typeof base[prop] == "object" && !webix.isDate(base[prop]) && !webix.isArray(base[prop])){
				webix.CodeParser.collapseNames(base[prop], prefix+prop+".", data);
			} else if(base[prop] && typeof base[prop] == "object" && webix.isArray(base[prop])){
				for(var i=0;i<base[prop].length;i++){
					webix.CodeParser.collapseNames(base[prop][i], prefix+prop+"["+i+"].", data);
				}
			} else {
				data[prefix+prop] = base[prop];
			}
		}
		return data;
	},
	//converts an object with primitive properties into an object with complex properties
	expandNames:function(base){
		var data = {},
			regex = /(\w+)\[(\d+)\]/,
			i, lastIndex, names, name, obj, prop;

		for(prop in base){
			names = prop.split(".");
			lastIndex = names.length-1;
			obj = data;
			for( i =0; i < lastIndex; i++ ){
				name = names[i];
				var match = regex.exec(name);

				if(match){
					if(!obj[match[1]]){
						obj[match[1]] = [];
					}

					while(obj[match[1]].length < 1+parseInt(match[2])){
						obj[match[1]].push({});
					}
				}else if(!obj[name]){
					obj[name] = {};
				}

				obj = match? obj[match[1]][match[2]] : obj[name];
			}
			obj[names[lastIndex]] = base[prop];
		}

		return data;
	}
};

修改之后的问题是，不支持原来的树形绑定，可以通过既压平展开、又保留原来的列表属性来兼容2种绑定方式。