diff --git a/doc/scripts/api.js b/doc/scripts/api.js index c907fcd..1ad0de4 100644 --- a/doc/scripts/api.js +++ b/doc/scripts/api.js @@ -21,7 +21,7 @@ define("api", ["mass"], function() { data: ["data", "parseData", "removeData", "mergeData"], css: "fn.css, fn.width, fn.height, fn.innerWidth, fn.innerHeight, fn.outerWidth, fn.outerHeight, fn.offset, fn.position, fn.offsetParent, fn.scrollParent, fn.scrollTop, fn.scrollLeft, css".match($.rword).sort(), attr: "fn.addClass, fn.hasClass, fn.removeClass, fn.toggleClass, fn.replaceClass, fn.val, fn.removeAttr, fn.removeProp, fn.attr, fn.prop, attr, prop".match($.rword).sort(), - event: ("fn.on,fn.bind,fn.off,fn.unbind,fn.delegate,fn.live,Event,eventSupport" + + event: ("fn.on,fn.bind,fn.off,fn.unbind,/Users/cheng/avalon/bug.htmlfn.delegate,fn.live,Event,eventSupport" + "fn.one,fn.undelegate,fn.die,fn.fire,fn.contextmenu,fn.click,fn.dblclick," + "fn.mouseout,fn.mouseover,fn.mouseenter,fn.mouseleave,fn.mousemove," + "fn.mousedown,fn.mouseup,fn.mousewheel,fn.abort,fn.error,fn.load,fn.unload," + diff --git a/mvvm/avalon.html.html b/mvvm/avalon.html.html index 9b9ed75..c5fbebe 100644 --- a/mvvm/avalon.html.html +++ b/mvvm/avalon.html.html @@ -27,6 +27,13 @@ avalon.define("content", function(vm) { vm.content = "这是斜体这是正常" }); + var a = avalon.define("a", function(vm) { + vm.monument = [{title: "aaa", descriptions: "111", ishowDetail: true}]; + + }) + setTimeout(function() { + a.monument = [{title: "bbb", descriptions: "222", ishowDetail: true}]; + }, 2000) avalon.scan() }) @@ -53,7 +60,7 @@

ms-html与{{}}

返回首页

avalon拥有三种填空数据的功能。

我们看下面的例子:

-
+ 例子1

HTML结构

             <div ms-controller="content">
@@ -71,12 +78,47 @@ 

JS

avalon.scan() })
-
-
-

-

{{content}}

-
不影响其他节点{{content|html}}
-
+
+

+

{{content}}

+
不影响其他节点{{content|html}}
+
+ + 例子2 +

HTML结构

+
+<div ms-controller="a">
+    <div ms-each-md="monument" >
+        <div >
+            <h2>{{md.title}}</h2>
+
+            <p ms-visible="md.ishowDetail" ms-html="md.descriptions"></p><!-- 使用ms-html -->
+            <p ms-visible="md.ishowDetail">{{md.descriptions|html}}</p> <!-- 直接插入 -->
+        </div>
+    </div>
+</div>
+                
+

JS

+
+            var a = avalon.define("a", function(vm) {
+                vm.monument = [{title: "aaa", descriptions: "111", ishowDetail: true}];
+
+            })
+            setTimeout(function() {
+                a.monument = [{title: "bbb", descriptions: "222", ishowDetail: true}];
+            }, 2000)
+                
+
+
+
+

{{md.title}}

+ +

+

{{md.descriptions|html}}

+
+
+
+



diff --git a/mvvm/javascripts/avalon2.js b/mvvm/javascripts/avalon2.js index 6794a60..fd74ceb 100644 --- a/mvvm/javascripts/avalon2.js +++ b/mvvm/javascripts/avalon2.js @@ -566,8 +566,8 @@ // 把滚动距离加到left,top中去。 // IE一些版本中会自动为HTML元素加上2px的border,我们需要去掉它 // http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx - pos.top = box.top + scrollTop - clientTop, - pos.left = box.left + scrollLeft - clientLeft + pos.top = box.top + scrollTop - clientTop + pos.left = box.left + scrollLeft - clientLeft return pos } //=============================val相关======================= @@ -1196,7 +1196,7 @@ elem.removeAttribute(prefix + "controller") } scanAttr(elem, scopes) //扫描特点节点 - if ( !stopScan[elem.tagName] && regbind.test(elem.innerHTML)) { + if (!stopScan[elem.tagName] && regbind.test(elem.innerHTML)) { var textNodes = [] var nodes = elem.childNodes for (var i = 0, node; node = nodes[i++]; ) { @@ -1331,7 +1331,7 @@ if (filters && filters.indexOf("html") !== -1) { avalon.Array.remove(filters, "html") binding.type = "html" - binding.replace = true + binding.replaceNodes = [node] } bindings.push(binding) //收集带有插值表达式的文本 } @@ -1691,13 +1691,20 @@ "html": function(data, vmodels) { watchView(data.value, vmodels, data, function(val, elem) { val = val == null ? "" : val + "" - if (data.replace) { + if (data.replaceNodes) { domParser.innerHTML = val + var replaceNodes = [] while (domParser.firstChild) { - documentFragment.appendChild(domParser.firstChild) + replaceNodes.push(domParser.firstChild) + documentFragment.appendChild(domParser.firstChild) } - elem.replaceChild(documentFragment, data.node) - } else { + elem.insertBefore(documentFragment, data.replaceNodes[0]); + for(var i = 0, node ; node = data.replaceNodes[i++];){ + elem.removeChild(node) + } + data.replaceNodes = replaceNodes + + }else{ elem.innerHTML = val } })