修改了动态绑定，参见staff.html中ok按钮的状态

demo/staff.html

@@ -64,7 +64,7 @@ <h4>Detail</h4>
 			<button class="btn btn-primary" vm-click="deleteClick"><i class="icon-remove icon-white"></i>Delete</button>
 		</div>
 		<div vm-visible="editing">
-			<button class="btn btn-primary" vm-click="okClick"><i class="icon-ok icon-white"></i>OK</button>
+			<button class="btn btn-primary" vm-click="okClick" vm-enable="okEnabled"><i class="icon-ok icon-white"></i>OK</button>
 			<button class="btn btn-primary" vm-click="cancelClick">Cancel</button>
 		</div>
 	</div>

js/modules/core/binding.js

@@ -28,6 +28,8 @@ thin.define("DOMBinding", ["_"], function (_) {
 	};
 
 	var vmMap = {};
+
+	var changeHandlers = [];
 
 	function parseElement(element, vm) {
 		var model = vm;
@@ -108,31 +110,35 @@ thin.define("DOMBinding", ["_"], function (_) {
 		vm.$watch(key, function (value, oldValue) {
 			element.value = value || "";
 		});
-
-		/*
-		 switch () {
-		 case "TextInput": {
-
-		 }
-		 }
-		 */
-		bindTextValue(element, key, vm);
+
+		switch (element.tagName) {
+			case "SELECT": {
+				bindSelectValue(element, key, vm);
+				break;
+			}
+			default: {
+				bindTextValue(element, key, vm);
+				break;
+			}
+		}
 
 		function bindTextValue(el, key, model) {
-
 			el.onkeyup = function () {
 				model[key] = el.value;
+				thin.fire({type: "vmchange"});
 			};
 
 			el.onpaste = function () {
 				model[key] = el.value;
+				thin.fire({type: "vmchange"});
 			};
 		}
 
 		function bindSelectValue(el, key, model) {
 			el.onchange = function () {
 				vm[key] = el.value;
-			}
+				thin.fire({type: "vmchange"});
+			};
 		}
 	}
 
@@ -160,6 +166,7 @@ thin.define("DOMBinding", ["_"], function (_) {
 		vm.$initializer = (function (model) {
 			return function () {
 				model[key]();
+				thin.fire({type: "vmchange"});
 			};
 		})(vm);
 	}
@@ -169,14 +176,15 @@ thin.define("DOMBinding", ["_"], function (_) {
 
 		element.onclick = function () {
 			vm[key]();
+			thin.fire({type: "vmchange"});
 		};
 	}
 
 	function bindEnable(element, key, vm, direction) {
 		thin.log("binding enable: " + key);
 
 		if (typeof vm[key] == "function") {
-			thin.schedule(function() {
+			changeHandlers.push(function() {
 				element.disabled = vm[key]() ^ direction ? true : false;
 			});
 		}
@@ -191,7 +199,7 @@ thin.define("DOMBinding", ["_"], function (_) {
 		thin.log("binding visible: " + key);
 
 		if (typeof vm[key] == "function") {
-			thin.schedule(function() {
+			changeHandlers.push(function() {
 				element.style.display = vm[key]() ^ direction ? "none" : "";
 			});
 		}
@@ -201,6 +209,16 @@ thin.define("DOMBinding", ["_"], function (_) {
 			});
 		}
 	}
+
+	function apply() {
+		for (var i=0; i<changeHandlers.length; i++) {
+			changeHandlers[i]();
+		}
+	}
+
+	thin.on("vmchange", function() {
+		apply();
+	});
 
 	return {
 		parse: parseElement

js/modules/role/vm/staffViewModel.js

@@ -38,6 +38,7 @@ thin.define("StaffViewModel", ["DataGrid"], function (DataGrid) {
 				}
 
 				that.setFormData(data);
+				thin.fire({type: "vmchange"});
 			});
 
 			grid.on("rowInserted", function (event) {
@@ -152,6 +153,15 @@ thin.define("StaffViewModel", ["DataGrid"], function (DataGrid) {
 			this.name = data.name;
 			this.gender = data.gender;
 			this.age = data.age;
+		},
+
+		okEnabled: function() {
+			if (this.editing && (this.name) && (this.name.length >= 5)) {
+				return true;
+			}
+			else {
+				return false;
+			}
 		}
 	};
 

js/thin.js

@@ -3,8 +3,6 @@
 	var fileMap = {};
 	var readyFunctions = [];
 
-	var scheduleList = [];
-
 	var noop = function () {
 	};
 
@@ -158,30 +156,13 @@
 			catch (ex) {
 
 			}
-		},
-
-		nextTick: function(func) {
-			var timer = setTimeout(function(){
-				func();
-				clearTimeout(timer);
-			}, 50);
-		},
-
-		schedule: function(func) {
-			scheduleList.push(func);
 		}
 	});
 
 	_.extend(thin, Events);
 
 	win.thin = thin;
 
-	var timer = setInterval(function(){
-		for (var i=0; i<scheduleList.length; i++) {
-			scheduleList[i]();
-		}
-	}, 50);
-
 	thin.define("_", [], function() {
 		return _;
 	});