dataBinder 수정

src/main/webapp/resources/js/base/dataset.js

@@ -388,7 +388,7 @@ class Dataset {
 			return keymapper(info) || info._tmpKey;
 		};
 		this._formats = new ValueFormat(conf.formats);
-		this._dataBinder = dataBinder.create(this, conf.inputs);
+		this.dataBinder = dataBinder.create(this, conf.doctx);
 		
 		if (!conf.trace)
 			this.log = () => {};
@@ -632,7 +632,7 @@ class Dataset {
 		this._current = item;
 
 		if (diff || fire) {
-			this._dataBinder.onCurrentChange(item);
+			this.dataBinder.onCurrentChange(item);
 			this.onCurrentChange(item);
 		}
 	}
@@ -931,13 +931,13 @@ class Dataset {
 		if (changed.length > 0) {
 			if (!item.state)
 				item.state = "modified";
-			this._dataBinder.onModify(changed, item);
+			this.dataBinder.onModify(changed, item);
 			this.onModify(changed, item, current);
 			if (notDirty)
 				this.onDirtiesChange(true);
 		} else if (revert) {
 			changed = Object.getOwnPropertyNames(data);
-			this._dataBinder.onModify(changed, item);
+			this.dataBinder.onModify(changed, item);
 			this.onModify(changed, item, current);
 		}
 
@@ -1255,7 +1255,7 @@ class DatasetControl {
 		notEmpty(conf.keymapper, "keymapper");
 		this.prefix = conf.prefix;
 		this.prefixName = conf.prefixName;
-		this._doctx = conf.doctx || "";
+		this.doctx = conf.doctx || "";
 		this.infoSize = conf.infoSize;
 		this.appendData = conf.appendData;
 		
@@ -1370,7 +1370,11 @@ class DatasetControl {
 	}
 	
 	currentToObject() {
-		return this.dataset._dataBinder.toObject(this.getCurrent("item"));
+		return this.dataBinder().toObject(this.getCurrent("item"));
+	}
+	
+	dataBinder() {
+		return this.dataset.dataBinder;
 	}
 
 	setCurrent(key) {
@@ -1404,7 +1408,7 @@ class DatasetControl {
 						size:this.infoSize,
 						init:() => {
 							let current = this.getCurrent("item");
-							this.dataset._dataBinder.onCurrentChange(current);
+							this.dataBinder().onCurrentChange(current);
 							this.setInfo(current);
 						}
 					});
@@ -1481,39 +1485,38 @@ class DatasetControl {
 		if (resp.saved)
 			this.reload({prev: selected.length == this.dataset.length});
 	}
-	
-	_selector(selector) {
-		let doctx = this._doctx;
-		return doctx ? "*[data-doctx='" + doctx + "'] " + selector : selector;
-	}
-	
+
 	querySelector(selector) {
-		return document.querySelector(this._selector(selector));
+		return this.dataBinder().querySelector(selector);
 	}
 	
 	querySelectorAll(selector) {
-		return document.querySelectorAll(this._selector(selector));
+		return this.dataBinder().querySelectorAll(selector);
 	}
 }
 
 var dataBinder = {
-	type: input => {
-		return input ? (input.getAttribute("type") || input.tagName).toLowerCase() : "";
-	},
-
-	dataMap: input => {
-		return input.getAttribute("data-map");
-	},
+	type: input => input ? (input.getAttribute("type") || input.tagName).toLowerCase() : "",
+	dataMap: input => input.getAttribute("data-map"),
+	property: input => input.name || input.id,
 	
-	property: input => {
-		return input.name || input.id;
+	toArray(val) {
+		if (isEmpty(val))
+			return [];
+		if (Array.isArray(val))
+			return val;
+		if ("string" == typeof val)
+			return val.split(",");
+		return [val];
 	},
 	
 	setValue: (input, value) => {
 		value = value || "";
 		switch (dataBinder.type(input)) {
 		case "radio":
-		case "checkbox": input.checked = value && value == input.value; break;
+		case "checkbox":
+			input.checked = dataBinder.toArray(value).includes(input.value);
+			break;
 		case "select":
 		    for (let option of input.options) {
 				option.selected = option.value == value;
@@ -1530,8 +1533,8 @@ var dataBinder = {
 		}
 	},
 
-	create: (dataset, selector) => {
-		if (!dataset || isEmpty(selector))
+	create: (dataset, doctx) => {
+		if (!dataset)
 			return {
 				onCurrentChange: item => {},
 				onModify: (changed, item) => {},
@@ -1539,43 +1542,76 @@ var dataBinder = {
 			};
 			
 		let obj = {
-				selector: selector,
+				selector: (selector) => doctx ? "[data-doctx='" + doctx + "'] " + selector : selector,
+				querySelector: (selector) => document.querySelector(obj.selector(selector)),
+				querySelectorAll: (selector) => Array.from(document.querySelectorAll(obj.selector(selector))),
+				inputs: () => obj.querySelectorAll("[name]"),
+				
+				inputValue: (input) => {
+					let val = input.value;
+					switch (dataBinder.type(input)) {
+					case "radio":
+						return input.checked ? val : undefined; 
+					case "checkbox":
+						let checks = obj.querySelectorAll("[name='" + input.name + "']");
+						switch (checks.length) {
+						case 0: return undefined;
+						case 1:
+							if (input.checked)
+								return val;
+							if ("Y" == val)
+								return "N";
+							if ('true' == val)
+								return 'false';
+							return undefined;
+						default:
+							return checks
+								.filter(input => input.checked)
+								.map(input => input.value)
+								.join(",");
+						}
+					case "img": return input.src;
+					default: return val !== undefined ? val : input.innerHTML;
+					}
+				},
 				setChanged: (evt) => {
 					let input = evt.target,
-						prop = dataBinder.dataMap(input),
-						val = input.value;
-					dataset.setValue(prop, val);
+						prop = dataBinder.dataMap(input) || dataBinder.property(input),
+						inputVal = obj.inputValue(input);
+					if (undefined === inputVal) return;
+					
+					dataset.setValue(prop, inputVal);
 				}
 			};
-			
+
 		obj.onCurrentChange = (current) => {
 			if (!current) return;
 			
-			document.querySelectorAll(obj.selector).forEach(input => {
-				let prop = dataBinder.dataMap(input);
+			obj.inputs().forEach(input => {
+				let prop = dataBinder.dataMap(input) || dataBinder.property(input);
 				if (!prop) return;
 
-				input.removeEventListener("change", obj.setChanged);
+				let evt = !["checkbox", "radio"].includes(dataBinder.type(input)) ? "change" : "click";
+				input.removeEventListener(evt, obj.setChanged);
 				dataBinder.setValue(input, current.getValue(prop));
-				input.addEventListener("change", obj.setChanged);
+				input.addEventListener(evt, obj.setChanged);
 			});
 		};
 		obj.onModify = (changed, item) => {
-			document.querySelectorAll(obj.selector).forEach(input => {
-				let prop = dataBinder.dataMap(input);
+			obj.inputs().forEach(input => {
+				let prop = dataBinder.dataMap(input) || dataBinder.property(input);
 				if (!changed.includes(prop)) return;
 				
 				dataBinder.setValue(input, item.getValue(prop));
 			});
 		};
 		obj.toObject = (item) => {
-			
 			let result = {};
-			document.querySelectorAll(obj.selector).forEach(input => {
+			obj.inputs().forEach(input => {
 				let dataMap = dataBinder.dataMap(input),
 					property = dataBinder.property(input) || dataMap;
 				
-				result[property] = item.data[dataMap];
+				result[property] = item.data[dataMap || property];
 			});
 			return result;
 		}