:input的onXxx回调无法取得当前@Bind值 fix #43

将onXxx的初始化侦听执行延后，到@Bind侦听之后
migijs · Jul 28, 2018 · 77aab95 · 77aab95
1 parent e125398
commit 77aab95
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 43 deletions.
diff --git a/build/VirtualDom.js b/build/VirtualDom.js
@@ -463,14 +463,8 @@ var VirtualDom = function (_Element) {
       var res = '';
       // onxxx侦听处理
       if (/^on[a-zA-Z]/.test(k)) {
-        self.once(_Event2.default.DOM, function (fake) {
-          // 防止fake未真实添加DOM
-          if (fake) {
-            return;
-          }
-          var name = k.slice(2).toLowerCase();
-          self.__addEvt(name, v);
-        });
+        self.__renderPropEventDelay = self.__renderPropEventDelay || [];
+        self.__renderPropEventDelay.push({ k: k.slice(2).toLowerCase(), v: v });
       }
       // Obj类型绑定处理
       else if (v instanceof _Obj2.default) {
@@ -637,6 +631,14 @@ var VirtualDom = function (_Element) {
             }
           }
         }
+      if (self.__renderPropEventDelay) {
+        self.__renderPropEventDelay.forEach(function (item) {
+          self.once(_Event2.default.DOM, function () {
+            self.__addEvt(item.k, item.v);
+          });
+        });
+        self.__renderPropEventDelay = null;
+      }
     }
   }, {
     key: '__addEvt',
@@ -758,14 +760,9 @@ var VirtualDom = function (_Element) {
 
   }, {
     key: '__onDom',
-    value: function __onDom(fake) {
+    value: function __onDom() {
       _get(VirtualDom.prototype.__proto__ || Object.getPrototypeOf(VirtualDom.prototype), '__onDom', this).call(this);
       var self = this;
-      // fake无需插入空白节点，直接递归通知
-      if (fake) {
-        _Component2.default.fakeDom(self.children);
-        return;
-      }
       // start标明真实DOM索引，因为相邻的文本会合并为一个text节点
       var option = { start: 0, first: true };
       self.__checkBlank(self.children, option);

diff --git a/dist/index.js b/dist/index.js
diff --git a/nightwatch.json b/nightwatch.json
@@ -13,7 +13,7 @@
     "host" : "127.0.0.1",
     "port" : 4444,
     "cli_args" : {
-      "webdriver.chrome.driver" : "lib/chromedriver_mac",
+      "webdriver.chrome.driver" : "lib/chromedriver_linux",
       "webdriver.ie.driver" : "lib/IEDriverServer.exe"
     }
   },

diff --git a/src/VirtualDom.js b/src/VirtualDom.js
@@ -348,14 +348,8 @@ class VirtualDom extends Element {
     var res = '';
     // onxxx侦听处理
     if(/^on[a-zA-Z]/.test(k)) {
-      self.once(Event.DOM, function(fake) {
-        // 防止fake未真实添加DOM
-        if(fake) {
-          return;
-        }
-        var name = k.slice(2).toLowerCase();
-        self.__addEvt(name, v);
-      });
+      self.__renderPropEventDelay = self.__renderPropEventDelay || [];
+      self.__renderPropEventDelay.push({ k: k.slice(2).toLowerCase(), v });
     }
     // Obj类型绑定处理
     else if(v instanceof Obj) {
@@ -524,6 +518,14 @@ class VirtualDom extends Element {
         }
       }
     }
+    if(self.__renderPropEventDelay) {
+      self.__renderPropEventDelay.forEach(function(item) {
+        self.once(Event.DOM, function() {
+          self.__addEvt(item.k, item.v);
+        });
+      });
+      self.__renderPropEventDelay = null;
+    }
   }
   __addEvt(name, v) {
     var self = this;
@@ -639,14 +641,9 @@ class VirtualDom extends Element {
   }
 
   // @override
-  __onDom(fake) {
+  __onDom() {
     super.__onDom();
     var self = this;
-    // fake无需插入空白节点，直接递归通知
-    if(fake) {
-      Component.fakeDom(self.children);
-      return;
-    }
     // start标明真实DOM索引，因为相邻的文本会合并为一个text节点
     var option = { start: 0, first: true };
     self.__checkBlank(self.children, option);

diff --git a/tests/inputevent/index.html b/tests/inputevent/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>test</title>
+</head>
+<body>
+<div id="test"></div>
+<div id="test2"></div>
+<script src="../../demo/es5-shim.js"></script>
+<script src="../../demo/es5-sham.js"></script>
+<script src="../../demo/migi-es6-shim.js"></script>
+<script src="../../dist/index.js"></script>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/tests/inputevent/script.jsx b/tests/inputevent/script.jsx
@@ -0,0 +1,20 @@
+class Component extends migi.Component {
+  constructor(...data) {
+    super(...data);
+    this.a = 1;
+  }
+  @bind a
+  input() {
+    document.querySelector('#test2').innerHTML = this.a;
+  }
+  render() {
+    return <div>
+      <input value={ this.a } onInput={ this.input }/>
+    </div>;
+  }
+}
+
+migi.render(
+  <Component/>,
+  '#test'
+);
diff --git a/tests/inputevent/test.js b/tests/inputevent/test.js
@@ -0,0 +1,17 @@
+var path = require('path');
+var fs = require('fs');
+
+module.exports = {
+  'init': function(browser) {
+    browser
+      .url('file://' + path.join(__dirname, 'index.html'))
+      .waitForElementVisible('body', 1000)
+      .assert.elementPresent('#test2');
+  },
+  'input': function(browser) {
+    browser
+      .setValue('input', 'a')
+      .assert.containsText('#test2', '1a')
+      .end();
+  },
+};
diff --git a/web/VirtualDom.js b/web/VirtualDom.js
@@ -463,14 +463,8 @@ var VirtualDom = function (_Element) {
       var res = '';
       // onxxx侦听处理
       if (/^on[a-zA-Z]/.test(k)) {
-        self.once(_Event2.default.DOM, function (fake) {
-          // 防止fake未真实添加DOM
-          if (fake) {
-            return;
-          }
-          var name = k.slice(2).toLowerCase();
-          self.__addEvt(name, v);
-        });
+        self.__renderPropEventDelay = self.__renderPropEventDelay || [];
+        self.__renderPropEventDelay.push({ k: k.slice(2).toLowerCase(), v: v });
       }
       // Obj类型绑定处理
       else if (v instanceof _Obj2.default) {
@@ -637,6 +631,14 @@ var VirtualDom = function (_Element) {
             }
           }
         }
+      if (self.__renderPropEventDelay) {
+        self.__renderPropEventDelay.forEach(function (item) {
+          self.once(_Event2.default.DOM, function () {
+            self.__addEvt(item.k, item.v);
+          });
+        });
+        self.__renderPropEventDelay = null;
+      }
     }
   }, {
     key: '__addEvt',
@@ -758,14 +760,9 @@ var VirtualDom = function (_Element) {
 
   }, {
     key: '__onDom',
-    value: function __onDom(fake) {
+    value: function __onDom() {
       _get(VirtualDom.prototype.__proto__ || Object.getPrototypeOf(VirtualDom.prototype), '__onDom', this).call(this);
       var self = this;
-      // fake无需插入空白节点，直接递归通知
-      if (fake) {
-        _Component2.default.fakeDom(self.children);
-        return;
-      }
       // start标明真实DOM索引，因为相邻的文本会合并为一个text节点
       var option = { start: 0, first: true };
       self.__checkBlank(self.children, option);