從做項(xiàng)目的角度來看,最好別改,因?yàn)槟悴磺宄髡叩南敕?容易把問題擴(kuò)大化.
改源碼不是不行,但那是沒有辦法的辦法,如果能找到其它好的解決方案, 最好別改
(實(shí)際上Ext這塊沒有問題,只是我在參照API使用時,混淆了一些概念)
不改源碼,只能找到其它好的解決方案了,用prototype.js看看:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
//tpl.append('div1',{id:'2'});
//tpl.insertAfter('div2',{id:'3'});
Insertion.After($('div1'),tpl.applyTemplate({id:'2'}));
Insertion.After($('div1'),tpl.applyTemplate({id:'3'}));
結(jié)果:
<div id="div88">this is div88</div>
<div id="div2">this is div2</div>
<div id="div3">this is div3</div>
問題解決了......................................
反思:為什么呢?
看代碼 (旁白:問題越引越深)
Prototype.js line:4042 (ver 1.6.0.2)
var Insertion = {
Before: function(element, content) {
return Element.insert(element, {before:content});
},
Top: function(element, content) {
return Element.insert(element, {top:content});
},
Bottom: function(element, content) {
return Element.insert(element, {bottom:content});
},
After: function(element, content) {
return Element.insert(element, {after:content});
}
};
接著看:line:1616
insert: function(element, insertions) {
element = $(element);
...............................
for (var position in insertions) {
content = insertions[position];
position = position.toLowerCase();
insert = Element._insertionTranslations[position];
..............................
return element;
}
在接著看:line:2490
Element._insertionTranslations = {
before: function(element, node) {
element.parentNode.insertBefore(node, element);
},
top: function(element, node) {
element.insertBefore(node, element.firstChild);
},
bottom: function(element, node) {
element.appendChild(node);
},
after: function(element, node) {
element.parentNode.insertBefore(node, element.nextSibling);
},
.............
};
看出區(qū)別了吧:
Ext:
El. insertAdjacentHTML
Prototype:
El.parentNode.insertBefore
Protoype用El.parentNode.insertBefore是考慮兼容性問題, Mozilla不支持El. insertAdjacentHTML,難到Ext沒考慮?( 旁白:思路已經(jīng)完全亂了,逐漸走向迷途的深淵)
在回顧下代碼:DomHelper.js line:267
insertHtml : function(where, el, html){
......
switch(where){
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
var range = el.ownerDocument.createRange();
var frag;
switch(where){
case "beforebegin":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "afterbegin":
if(el.firstChild){
range.setStartBefore(el.firstChild);
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
}else{
el.innerHTML = html;
return el.firstChild;
}
case "beforeend":
if(el.lastChild){
range.setStartAfter(el.lastChild);
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
}else{
el.innerHTML = html;
return el.lastChild;
}
case "afterend":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
從第二部分(第二個switch塊)看的出來,Ext也考慮了,只是如果是ie的話,代碼走不到第二部分.
現(xiàn)在列出case分支與前面方法名的對應(yīng)關(guān)系:
insertFirst:' afterBegin'
insertBefore:' beforeBegin'
insertAfter:' afterEnd'
append:' beforeEnd'
對照上面的代碼,現(xiàn)在看來,歸根到底問題就是我混淆了append,insertAfter.以為append是指在當(dāng)前節(jié)點(diǎn)后面直接追加一個節(jié)點(diǎn), insertAfter是指把節(jié)點(diǎn)插到當(dāng)前節(jié)點(diǎn)后面.實(shí)際上如果是這樣理解的話append,insertAfter不就功能一樣了,那Ext作者寫兩個方法干嘛?.,唉,自己腦殘了,沒仔細(xì)分析代碼就亂用,結(jié)果引出這大長串事.
摘錄:Ext.Template中關(guān)于append,insertAfter方法的說明
Applies the supplied values to the template and appends the new node(s) to el
Applies the supplied values to the template and inserts the new node(s) after el
提示:對于沒看懂的朋友請把第一句的 to 理解成 in 是不是就清晰多了呢.另外,如果對頁面元素操做的話請用Element,上面的insert,append功能它都有.
在多的努力用在了錯誤的方向上,最終的結(jié)果都是零!
唉,
世間本無事, 庸人自擾之.

最新評論