0

ajaxを使用して、ノックアウトテンプレートとして使用する部分的なHTMLドキュメントを取得します。

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. オブザーバブルContentHTMLはhtmlで更新されます
  6. オブザーバブルTemplateIDは生成された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の問題はありますか？
koが使用するためにhtmlページ内にテンプレートを「保存」する別の方法はありますか（私は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);
    });
});

これはko-wayより少し少ないですが、すべてのブラウザで機能します。

于 2012-04-20T09:27:33.167 に答える