0

我使用 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());
    });
});
  1. 最初<div>将显示：“正在加载”
  2. 动态模板的id属性设置为生成的ID
  3. GetContent()执行 ajax 调用以检索内容
  4. 当 ajax 调用完成时，回调函数被调用
  5. observableContentHTML用 html 更新
  6. observableTemplateID设置为生成的 ID
  7. 由<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 原生模板！）？

4

1 回答 1

1

我已经使用knockmeout.net 上的这篇文章解决了这个问题：

更新的 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);
    });
});

这有点少一些，但适用于所有浏览器。

于 2012-04-20T09:27:33.167 回答