添加data-inlcude-replace辅助指令

RubyLouvre · Oct 30, 2014 · 0be0833 · 0be0833
1 parent 54ff6a6
commit 0be0833
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 54 deletions.
diff --git a/avalon.js b/avalon.js
@@ -2601,17 +2601,29 @@
                 }
             } else if (method === "include" && val) {
                 var vmodels = data.vmodels
-                var rendered = getBindingCallback(elem, "data-include-rendered", vmodels)
-                var loaded = getBindingCallback(elem, "data-include-loaded", vmodels)
+                var rendered = data.includeRendered
+                var loaded = data.includeLoaded
+                var replace = data.includeReplaced
+                var target = replace ? elem.parentNode : elem
 
                 function scanTemplate(text) {
                     if (loaded) {
-                        text = loaded.apply(elem, [text].concat(vmodels))
+                        text = loaded.apply(target, [text].concat(vmodels))
                     }
-                    avalon.innerHTML(elem, text)
-                    scanNodeList(elem, vmodels)
-                    rendered && checkScan(elem, function() {
-                        rendered.call(elem)
+
+                    while (true) {
+                        var node = data.startInclude.nextSibling
+                        if (node && node !== data.endInclude) {
+                            target.removeChild(node)
+                        } else {
+                            break
+                        }
+                    }
+                    var dom = avalon.parseHTML(text)
+                    target.insertBefore(dom, data.endInclude)
+                    scanNodeList(dom, vmodels)
+                    rendered && checkScan(target, function() {
+                        rendered.call(target)
                     })
                 }
                 if (data.param === "src") {
@@ -2971,6 +2983,22 @@
                     text = RegExp.$1
                 }
             }
+            if (data.type === "include") {
+                var elem = data.element
+                data.includeRendered = getBindingCallback(elem, "data-include-rendered", vmodels)
+                data.includeLoaded = getBindingCallback(elem, "data-include-loaded", vmodels)
+                var outer = data.includeReplaced = !!avalon(elem).data("includeReplace")
+                data.startInclude = DOC.createComment("ms-include")
+                data.endInclude = DOC.createComment("ms-include-end")
+                if (outer) {
+                    data.element = data.startInclude
+                    elem.parentNode.insertBefore(data.startInclude, elem)
+                    elem.parentNode.insertBefore(data.endInclude, elem.nextSibling)
+                } else {
+                    elem.insertBefore(data.startInclude, elem.firstChild)
+                    elem.appendChild(data.endInclude)
+                }
+            }
             data.handlerName = "attr" //handleName用于处理多种绑定共用同一种bindingExecutor的情况
             parseExprProxy(text, vmodels, data, (simple ? null : scanExpr(data.value)))
         },

diff --git a/examples/include2.html b/examples/include2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>duplexHooks</title>
+        <meta http-equiv="X-UA-Compatible" content="IE=8" />
+        <script src="avalon.js"></script>
+        <style>
+            .bp{
+                border: 1px  solid green;
+            }
+            .contain{
+                border: 1px solid red;
+            }
+        </style>
+        <script>
+            var a = avalon.define({
+                $id: "test",
+                aaa: "aaa.html",
+                change: function() {
+                    a.aaa = a.aaa === "aaa.html" ? "bbb.html" : "aaa.html"
+                }
+            })
+
+        </script>
+    </head>
+    <body ms-controller="test">
+        <button type="button" ms-click="change">change</button>
+        <div ms-include-src="'include2'+aaa" class="contain"></div>
+        <div ms-include-src="'include2'+aaa" class="contain" data-include-replace="true"></div>
+    </body>
+</html>
diff --git a/examples/include2aaa.html b/examples/include2aaa.html
@@ -0,0 +1,2 @@
+<div>xxxxxxxxxxxxx</div>
+<div>yyyyyyyyyyyy</div>
diff --git a/examples/include2bbb.html b/examples/include2bbb.html
@@ -0,0 +1,3 @@
+<p class="bp">aaaaaaaaaaa</p>
+<p class="bp">bbbbbbbbbbb</p>
+<p class="bp">ccccccccccc</p>
diff --git a/test.html b/test.html