在运行时添加 Knockout 模板会清空 HTML DOM答案

【问题标题】：Adding Knockout Template at run time empties HTML DOM在运行时添加 Knockout 模板会清空 HTML DOM
【发布时间】：2015-05-28 18:49:24
【问题描述】：

在运行时添加剔除模板会清空 HTML DOM

    var templateEngine = new ko.nativeTemplateEngine();
    templateEngine.addTemplate = function (templateName, templateMarkup) {
        document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
    };
    templateEngine.addTemplate("gridTable","<table></table");

所有早期的内容都消失了，DOM 变成了

<html><head><script type="text/html" id="gridView"><table></table></script></head></html>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Document/write：在已关闭（已加载）的文档上调用document.write自动调用document.open，这将清除文档

标签： javascript jquery html dom knockout.js

【解决方案1】：

正如@nemsev 所说，

eveloper.mozilla.org/en-US/docs/Web/API/Document/write：在关闭（加载）的文档上调用 document.write自动调用 document.open 来清除文档

所以，我将代码修改为，

    var templateEngine = new ko.nativeTemplateEngine();

    templateEngine.addTemplate = function (templateName, templateMarkup) {
        //document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
        var scriptTag = document.createElement("script");
        scriptTag.type = "text/html";
        scriptTag.id = templateName;
        scriptTag.innerHTML = templateMarkup;
        var node = document.getElementsByTagName("head")[0];
        node.appendChild(scriptTag);
    };

    templateEngine.addTemplate("gridTable","<table></table");

【讨论】：

【解决方案2】：

我建议您在 html 结构中创建单独的 div，然后在该 div 中加载模板。例如，您可以使用 jquery。

$("#someDiv").append(templateMarkup);

【讨论】：