Question

我使用ajax检索部分HTML文档以用作Knockout模板。

HTML：

<script type="text/html" id="LoadingTemplate">Loading...</script>
<script type="text/html" data-bind="attr: {'id': DynamicTemplateID}, html: ContentHTML></script>

<div class="main-page" data-bind="template: TemplateID"></div>

脚本（部分）：

self.TemplateID = ko.observable("LoadingTemplate");
self.DynamicTemplateID = ko.observable(GenerateUUID());

self.ContentHTML = ko.observable();    
ko.computed(function () {
    var url = self.ContentURL();
    self.GetContent(url, function (html) {
        self.ContentHTML(html);
        self.TemplateID(self.DynamicTemplateID());
    });
});

最初<div>会显示：'正在加载'
动态模板的id属性设置为生成的ID
GetContent()执行ajax调用以检索内容
当ajax调用完成时，调用回调函数
使用html

ContentHTML

可观察TemplateID设置为生成的ID
<div>由ko

在Firefox中，这就像一个魅力，但IE8会在使用加载的模板更新虚拟Error: Unexpected call to method or property access.标记时引发异常：<script>。

错误是jQuery.html()引发的。首先elem.innerHTML = value;失败，然后捕获this.empty().append( value )失败，这给出了例外。

部分'堆栈跟踪'：

this.appendChild( elem );    => callback function in jquery.append (v1.7.2 line 5847)
jquery.domManip
jquery.append
jquery.html
ko.utils.setHtml
ko.bindingHandlers.html.update
ko.applyBindingsToNodeInternal
ko.dependentObservable.evaluateImmediate

可能是什么问题？更新<script>标签是否存在（已知）IE8问题？是否有另一种方法可以在html页面中“存储”模板供ko使用（我更喜欢使用ko原生模板！）？

Answer 1

我在knockmeout.net上使用this article解决了这个问题：

更新了HTML（删除了动态<script>代码）：

<script type="text/html" id="LoadingTemplate">Loading...</script>
<div class="main-page" data-bind="template: TemplateID"></div>

更新的脚本（在下载模板后附加脚本标记）：

self.TemplateID = ko.observable("LoadingTemplate");
self.dynamicTemplateID = GenerateUUID();

ko.computed(function () {
    var url = self.ContentURL();
    self.GetContent(url, function (html) {
        $("body").append('<script type="text/html" id="' + self.dynamicTemplateID + '">' + html + '</script>');

        self.TemplateID(self.dynamicTemplateID);
    });
});

这有点像ko-way，但可以在所有浏览器中使用。

当动态更新Knockoutjs模板时，在ie8中发生异常

1 个答案: