如何暫時放置任意DOM節點

我在KnockoutJS中做了一些高級工作，從而在KO過程之外生成了一些HTML，將綁定應用到它們，然後將它們插入到我的頁面中。如何暫時放置任意DOM節點

問題是住房新的HTML。我的HTML是一對錶行，當我做

var div = document.createElement('div'); 
div.innerHTML = template(viewModel);

股利剔除掉所有的表的內容（我tr和td標籤），大概是因爲div的不能包含錶行。

現在我的俗氣的解決方法如下：使用tbody。但是我想要一些更廣義的東西。我以爲使用文檔片段，但似乎沒有設置的innerHTML屬性。

處理這個問題的首選方法是什麼？

var div = document.createElement('tbody'); 
div.innerHTML = template(viewModel); 
ko.applyBindingsToDescendants(bindingContext, div); 

$(element).after($(div).contents());

來源

2014-06-04 Adam Rackis

作爲一種解決方法，您可以獲取父節點的類型，創建一個空的分離的新節點來存放您的內容，然後從t這裏。但最好弄清楚爲什麼你的內容被剝離開始。 – Nit

@Nit - 這實際上不是一個壞主意。你能把它作爲答案發布嗎？ –

看起來像取決於你如何設置HTML [小提琴]（http://jsfiddle.net/origineil/B7Kge/） – Origineil

作爲一種變通方法，你可以獲取父節點的類型，創建該類型的空超然新節點，以容納您的內容，後來從那裏獲取的項目。

它看起來是這樣的，假設你不介意插入內容前element，而不是後：

var container = document.createElement(element.parentNode.tagName), 
    frag = document.createDocumentFragment(); 

container.innerHTML = template(viewModel); 
ko.applyBindingsToDescendants(bindingContext, container); 
while (container.childNodes.length){ 
    frag.appendChild(container.childNodes[0]); 
} 
element.parentNode.insertBefore(frag, element);

但它會更好弄清楚爲什麼你的內容剝離開始。

來源

2014-06-05 05:25:52 Nit

我想你會得到這個問題只與表部件。

因此，你可以這樣做：

var templ = template(viewModel); 
var newElement = document.createElement(
        $(templ).is("tr, tbody, thead") ? 'table' : 'div' 
       ); 
newElement.innerHTML(templ);

來源

2014-06-05 05:37:05

尼特的回答作品，但其仍是黑客攻擊的一位，我會用一個自定義模板源代碼而不是。

首先，你需要創建一個使用字符串作爲源的發動機，像

var stringTemplateSource = function (template) { 
     this.template = template; 
}; 

stringTemplateSource.prototype.text = function() { 
    return this.template; 
}; 

var stringTemplateEngine = new ko.nativeTemplateEngine(); 
stringTemplateEngine.makeTemplateSource = function (template) { 
    return new stringTemplateSource(template); 
};

然後你可以使用它從一個自定義喜歡

ko.renderTemplate(template, bindingContext.createChildContext(data), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

結合是template是包含實際的字符串html

來源

2014-06-05 07:23:44 Anders

感謝您的信息。好東西，當然，但我的整個觀點是，對於性能密集型的東西，徹底刪除淘汰賽。而且，整個事情都是黑客攻擊，但速度非常快。 –

「對其應用綁定」您仍然對它們應用綁定？不會在那裏繞過嗎？ – Anders

如何暫時放置任意DOM節點

回答

相關問題