ie8의 html5 요소가있는 jQuery 템플릿

Question

너무 많은 질문을하고 있지만 ie8에서 작동하는 html5 요소가있는 jQuery 템플릿을 얻으려고합니다. head.js를 사용하여 html5 요소를 등록 했으므로 html5shiv를 시도했지만 운이 없었습니다. 페이지에서 잘 작동하는 다른 html5 요소가 있지만 jQuery 템플릿 시스템은 템플릿에서 html5 요소를 사용하면 아무 것도 반환하지 않습니다. 내가 div의에 HTML5 요소를 변경하고 템플릿 IE8에서 작동 물건 경우

<aside> 
    <script id="sidebar-template" type="text/x-jquery-tmpl"> 
     <section> 
      <header>${name}</header> 
      <section> 
       {{each links}} 
       <a href="${link}" class="${icon}">${name}</a> 
       {{/each}} 
      </section> 
     </section> 
    </script> 
</aside> 

:

여기 내 템플릿 중 하나의 예입니다. http://jsfiddle.net/keegan3d/E6EbG/1/

가 IE8에서 작업이 HTML5 요소를 얻을 수 어쨌든 거기 : 나는

내가 함께 내 템플릿을 보여주는 jsfiddle을 넣어 ...이 템플릿은 다른 모든 브라우저에서이 더 큰 놀라움을 작동하지 않습니다 점에 유의해야합니까?

Answer 1

실제로 답변이 아니더라도 비슷한 문제가 있음을 확인할 수 있습니다. 어떤 경우에는 콘텐츠가 렌더링을 거부하고, 다른 경우에는 html5 요소에서 타겟팅 된 스타일이 적용을 거부합니다. 새로운 html5 요소를 div로 변경하면 모든 것이 예상대로 작동합니다.

Answer 2

직접이 문제가 발생했습니다. .html에 대한 입력으로 템플릿 함수에 의해 반환되는 jQuery 객체를 사용할 때 HTML5 요소가있는 IE8에서 문제가 발생합니다. 예를 들어 :

var htmlContent = $.tmpl("myTemplate", { items: items }).html(); 
//assuming we have one outer element, which is a div 
htmlContent = "<div>" + htmlContent + "</div>"; 
$("#my_container").html(htmlContent); 

나는 이것이 jQuery를 버그이며, 특히 temlate 엔진 관련되지 않은 의심 :

$("#my_container").html($.tmpl("myTemplate", { items: items })); 

어떤 일을 시도 후 나는 다음과 같은 해결 방법을 발견했다.

Answer 3

아마이 문제는 관련 Google 검색 결과 인 것 같습니다. Google을 통해 방문하는 다른 사용자에게 도움이 될 수도 있습니다.

...

내가 같은 문제가 있었다 - 나는 하나의 HTML 파일이 여러 스크립트 블록 내 모든 템플릿을 포함하는 (내 모든 템플릿 모음으로 사용하는 것이, HTTP 요청을 저장).

이 대량 파일에서 HTML의 단일 블록을 추출하려면 .text() 및 .contents()를 사용하고 있으며 IE8은이를 처리 할 수 ​​없습니다.

여기

<script class="template-header" type="text/x-jQuery-tmpl"> 
    <div id="container-title" class="container"> 
     <div class="container-inner"> 
      <div class="box-headline app-nav"> 
       <div class="box-inner"> 
        <h1><a href="${prefs.urlShopHome}" class="app-nav">${text.name}</a></h1>  
       </div> 
      </div> 
     </div> 
    </div> 
</script> 

와가의 jQuery 부분 : 예를 -

그것은 컨텐츠를 잡기 위해 신뢰할 수있는 유일한 방법은() .html 중에서 사용 된 것으로 나타났다

// ... 
"success": function(data, textStatus, jqXHR) { 
    var header = $(data).filter(function(){ return $(this).is('.template-header') }); 
    header.each(function() { 
     var html = $(this).html(); // do not use .text(), .contents() here 
     // ... 
    }); 
}); 

들으, 벤 나델에 - 그는 테스트를 수행했습니다 : http://www.bennadel.com/blog/1829-Script-Tags-jQuery-And-Html-Text-And-Contents-.htm

Answer 4

IE8의 경우 HTML5 shiv를 사용해야합니다.여기

document.createElement("aside"); 
document.createElement("section"); 
document.createElement("header"); 

결과 :

내가 당신의 자바 스크립트에 삽입 Updated jsFiddle

Answer 5

이봐,이 조금 늦게 될 수도 있지만 나는 내 응용 프로그램에 IE8 시험을하는 동안이 건너 왔어요 .. I 비슷한 템플릿을 사용하고 있고 HTML을 주입 할 때 ie8 스타일링이 아니 었습니다.

체크 아웃 http://jdbartlett.com/innershiv/

건배