让ms-repeat, ms-with在目标都是对象的情况下支持data-with-sorted回调

RubyLouvre · Feb 8, 2014 · bdf363a · bdf363a
1 parent 50788db
commit bdf363a
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 <h1>Avalon</h1>
 <p>迷你简单易用的MVVM框架</p>
 <p>前端做久了就会发现HTML(DOM)才是所有前端的真正精髓汇聚地。不管JS和CSS都是为DOM服务的。但是DOM遍布荆棘与陷阱，因此才出现像jQuery那样专门为它填坑的库，
-前端开发就是一边填坑一边写业务中进行。avalon就是打破这局面而诞生，让我们摆脱DOM的掣肘，专注于需求本身，将可变的数据与操作数据的方法封装成模型。
-在更高的层次上组织代码，提高软件的可维护性和拓展性。</p>
+当下的前端开发就是一边填坑一边写业务中进行。avalon的诞生改变了这一切，让我们摆脱DOM的掣肘，专注于需求本身，将可变的数据与操作数据的方法封装成模型。
+在更高的层次上组织代码，提高软件的可维护性，可扩展性和可重用性。</p>
 <hr>
 <ul>
     <li>avalon.js 兼容IE6，及标准浏览器</li>

diff --git a/avalon.js b/avalon.js
@@ -2330,7 +2330,8 @@
                 case "append":
                     var pool = el
                     var transation = documentFragment.cloneNode(false)
-                    var callback = getBindingCallback(parent.getAttribute("data-with-sorted"), data.vmodels)
+                    var dataElement = data.endRepeat ? data.template.firstChild : data.parent
+                    var callback = getBindingCallback(dataElement.getAttribute("data-with-sorted"), data.vmodels)
                     var keys = []
                     var spans = []
                     for (var key in pos) { //得到所有键名
@@ -2617,15 +2618,15 @@
                     }
                 }
                 data.rollback = function() {
-                    notifySubscribers(list, "clear")
-                    var endRepeat = this.endRepeat
-                    var parent = this.parent
-                    var element = this.template.firstChild
-                    parent.insertBefore(this.template, endRepeat || null)
+                    bindingExecutors.each.call(data, "clear")
+                    var endRepeat = data.endRepeat
+                    var parent = data.parent
+                    var element = data.template.firstChild
+                    parent.insertBefore(data.template, endRepeat || null)
                     if (endRepeat) {
                         parent.removeChild(endRepeat)
-                        parent.removeChild(this.startRepeat)
-                        this.element = element
+                        parent.removeChild(data.startRepeat)
+                        data.element = element
                     }
                 }
                 data.handler("append", list, pool)

diff --git a/avalon.mobile.js b/avalon.mobile.js
@@ -1827,7 +1827,8 @@
                         deleteRange.setEndAfter(parent.lastChild)
                     }
                     removeFromSanctuary(deleteRange.extractContents())
-                    proxies.length = 0
+                    if (proxies)
+                        proxies.length = 0
                     break
                 case "move":
                     var t = proxies.splice(pos, 1)[0]
@@ -1847,7 +1848,8 @@
                 case "append":
                     var pool = el
                     var transation = documentFragment.cloneNode(false)
-                    var callback = getBindingCallback(parent.getAttribute("data-with-sorted"), data.vmodels)
+                    var dataElement = data.endRepeat ? data.template.firstChild : data.parent
+                    var callback = getBindingCallback(dataElement.getAttribute("data-with-sorted"), data.vmodels)
                     var keys = []
                     var spans = []
                     for (var key in pos) { //得到所有键名
@@ -2130,15 +2132,15 @@
                     }
                 }
                 data.rollback = function() {
-                    notifySubscribers(list, "clear")
-                    var endRepeat = this.endRepeat
-                    var parent = this.parent
-                    var element = this.template.firstChild
-                    parent.insertBefore(this.template, endRepeat || null)
+                    bindingExecutors.each.call(data, "clear")
+                    var endRepeat = data.endRepeat
+                    var parent = data.parent
+                    var element = data.template.firstChild
+                    parent.insertBefore(data.template, endRepeat || null)
                     if (endRepeat) {
                         parent.removeChild(endRepeat)
                         parent.removeChild(this.startRepeat)
-                        this.element = element
+                        data.element = element
                     }
                 }
                 data.handler("append", list, pool)

diff --git a/index27eachclear.html b/index27eachclear.html
@@ -0,0 +1,28 @@
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script src="avalon.js"></script>
+        <script>
+            var model = avalon.define("clear", function(vm) {
+                vm.array = [1, 2, 3, 4, 5]
+            })
+            setTimeout(function() {
+                model.array.clear()
+                setTimeout(function() {
+                    model.array.push("aa", "bb", "cc", "dd")
+                }, 3000)
+            }, 3000)
+        </script>
+    </head>
+    <body ms-controller='clear'>
+        <ol ms-each='array'>
+            <li>{{el}}</li>
+        </ol>
+        <ul>
+            <li  ms-repeat='array'>{{el}}</li>
+        </ul>
+    </body>
+</html>
diff --git a/index27with.html b/index27with.html
@@ -1,44 +1,57 @@
 <!DOCTYPE HTML>
 <html id="html">
-<head>
-    <meta charset="utf-8">
-    <title>测试用例</title>
-    <script src="avalon.js"></script>
-</head>
-<body>
-<div ms-controller="test">
-    <h1>动态更新对象属性</h1>
-    <p>请耐心等待定时器的变化</p>
-    <div ms-with="obj">
-        <div>{{$val.num}}</div>
-    </div>
-</div>
+    <head>
+        <meta charset="utf-8">
+        <title>测试用例</title>
+        <script src="avalon.js"></script>
+        <style>
+            .with_parent{
+                padding:5px;
+                border:1px solid red;
+                height:80px;
+            }
+        </style>
+    </head>
+    <body>
+        <div ms-controller="test">
+            <h1>动态更新对象属性</h1>
+            <p>请耐心等待定时器的变化</p>
+            <div ms-with="obj" class='with_parent'>
+                <div class='xxx'>{{$val.num}}</div>
+            </div>
+            <div class='repeat_parent'  >
+                <div ms-repeat="obj" title='这是repeat'>{{$val.num}}</div>
+            </div>
+        </div>
 
+        <script>
 
-<script>
+            window.xxx = false
+            var model = avalon.define("test", function(vm) {
+                vm.obj = {
+                    a1: {num: 1111}
+                }
+            });
+            setTimeout(function() {
 
+                window.xxx = true
+                model.obj = {
+                    a1: {num: 2222}, a2: {num: 3333}
+                }
+                setTimeout(function() {
+                    model.obj.a1.num = 4444
+                    model.obj.a2.num = 5555
 
-    var model = avalon.define("test", function (vm) {
-        vm.obj = {
-            a1: {num: 1111}
-        }
-    });
-    setTimeout(function () {
-        model.obj = {
-            a1: {num: 2222}, a2: {num: 3333}
-        }
-        setTimeout(function () {
-            model.obj.a1.num = 4444
-            model.obj.a2.num = 5555
+                    setTimeout(function() {
+                        model.obj = {
+                            a1: {num: "MMMMM"},
+                            a2: {num: "NNNNN"}
+                        }
+                    }, 2000)
 
-            setTimeout(function () {
-                model.obj.a1.num = 6666
-                model.obj.a2.num = 7777
-            }, 2000)
-
-        }, 2000)
+                }, 2000)
 
-    }, 2000)
-</script>
-</body>
+            }, 2000)
+        </script>
+    </body>
 </html>
diff --git a/index30.html b/index30.html
@@ -0,0 +1,30 @@
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>avalon.css</title>
+
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script src="avalon.js" type="text/javascript"></script>
+        <script>
+            avalon.bindingHandlers.valid = function(data) {
+                avalon.log("自定义绑定")
+                avalon.log(data.value)
+            }
+        </script>
+
+        <script>
+            avalon.define("test", function(vm) {
+                vm.aaa = "xxx"
+            })
+        </script>
+    </head>
+    <body>
+        <div id="aaa" ms-controller="test">
+            <div id="bbb" ms-valid="aaa">
+                自定义绑定
+            </div>
+        </div>
+    </body>
+</html>