绑定的原理
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种绑定方式。