修复多视图事件传播不到的问题

peihexian · Nov 21, 2014 · bcf4310 · bcf4310
1 parent 8907c10
commit bcf4310
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/avalon.js b/avalon.js
@@ -1798,22 +1798,28 @@
                     }
                 }
             } else if (special === "up" || special === "down") {
-                var element = events.expr && findNode(events.expr)
-                if (!element)
+                var elements = events.expr && findNodes(events.expr)
+                if (elements.length === 0)
                     return
                 for (var i in avalon.vmodels) {
                     var v = avalon.vmodels[i]
                     if (v !== this) {
                         if (v.$events.expr) {
-                            var node = findNode(v.$events.expr)
-                            if (!node) {
+                            var eventNodes = findNodes(v.$events.expr)
+                            if (eventNodes.length === 0) {
                                 continue
                             }
-                            var ok = special === "down" ? element.contains(node) : //向下捕获
-                                    node.contains(element) //向上冒泡
-                            if (ok) {
-                                node._avalon = v //符合条件的加一个标识
-                            }
+                            //循环两个vmodel中的节点，查找匹配（向上匹配或者向下匹配）的节点并设置标识
+                            avalon.each(eventNodes, function(i, node) {
+                                avalon.each(elements, function(j, element) {
+                                    var ok = special === "down" ? element.contains(node) : //向下捕获
+                                        node.contains(element) //向上冒泡
+
+                                    if (ok) {
+                                        node._avalon = v //符合条件的加一个标识
+                                    }
+                                });
+                            })
                         }
                     }
                 }
@@ -1849,16 +1855,18 @@
         }
     }
     var ravalon = /(\w+)\[(avalonctrl)="(\S+)"\]/
-    var findNode = DOC.querySelector ? function(str) {
-        return DOC.querySelector(str)
+    var findNodes = DOC.querySelectorAll ? function(str) {
+        return DOC.querySelectorAll(str)
     } : function(str) {
         var match = str.match(ravalon)
         var all = DOC.getElementsByTagName(match[1])
+        var nodes = []
         for (var i = 0, el; el = all[i++]; ) {
             if (el.getAttribute(match[2]) === match[3]) {
-                return el
+                nodes.push(el)
             }
         }
+        return nodes
     }
     /*********************************************************************
      *                           依赖调度系统                             *

diff --git a/examples/$fire3.html b/examples/$fire3.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>事件在多视图中间的传播</title>
+    <script src="../avalon.js"></script>
+    <script type="text/javascript">
+
+        var ancestorVM = avalon.define({
+            $id: "ancestor",
+            up: function() {
+                posterity.$fire("up!posterity_up")
+            }
+        });
+
+        ancestorVM.$watch("posterity_up", function() {
+            alert("up")
+        })
+
+        var posterity = avalon.define({
+            $id: "posterity"
+        });
+
+    </script>
+</head>
+<body>
+
+<div>
+    <div ms-controller="ancestor"></div>
+    <div ms-controller="ancestor">
+        <div ms-controller="posterity"></div>
+        <button type="button" ms-click="up">up</button>
+    </div>
+</div>
+
+</body>
+</html>