2012-04-19 5 views
0

ajax를 사용하여 부분 HTML 문서를 검색하여 녹아웃 템플릿으로 사용합니다.Knockoutjs 템플릿을 동적으로 업데이트 할 때 ie8에서 예외가 발생합니다.

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 속성이 설정되어
  3. 생성 된 ID
  4. GetContent() AJAX 호출 콜백 함수
  5. 관찰 가능한 ContentHTML가 관찰 TemplateID
  6. <div>가 생성 된 ID로 설정
  7. 되는 HTML로 갱신된다라고 끝내면 AJAX 호출 콘텐츠
  8. 를 검색 수행 Firefox에서

코에 의해 갱신이 마법처럼 작동하지만 IE8에서 예외가 발생합니다 : Error: Unexpected call to method or property access.를로드 템플릿 더미 <script> 태그를 업데이트하는 동안.

오류는 jQuery.html()에 의해 발생합니다. 먼저 elem.innerHTML = value;이 실패하고 catch 된 경우 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 네이티브 템플릿을 사용하는 것을 선호합니다).

답변

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); 
    }); 
}); 

이 덜 약간은 코 방법입니다하지만 모든 브라우저에서 작동 .

관련 문제