Plantillas jQuery con elementos html5 en ie8

Question

Podría estar pidiendo demasiado, pero estoy tratando de obtener plantillas jQuery con elementos html5 que funcionen en ie8. Estoy usando head.js así que eso es registrar los elementos html5, también probé html5shiv pero no tuve suerte. Hay otros elementos html5 en la página que funcionan bien, pero el sistema de plantillas de jquery no devuelve nada si uso elementos html5 en la plantilla.

He aquí un ejemplo de una de mis plantillas:

<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> 

Si cambio de los elementos HTML5 para divs y esas cosas la plantilla funciona en IE8. Debo señalar que esta plantilla funciona en todos los otros navegadores, no hay gran sorpresa ...

que arme un jsFiddle demostrando mi plantilla: http://jsfiddle.net/keegan3d/E6EbG/1/

¿Hay alguna forma de obtener estos elementos HTML5 que trabajan en IE8?

Answer 1

Aunque realmente no es una respuesta, puedo confirmar que estoy teniendo un problema similar. En algunos casos, el contenido se niega a procesar, en otros casos, los estilos que están orientados en los elementos html5 se niegan a aplicar. Cambiar los nuevos elementos html5 a divs hace que todo funcione como esperaba.

Answer 2

Encontré este problema yo mismo. El problema ocurre en IE8 con elementos html 5 cuando se utiliza el objeto jQuery que devuelve la función de plantilla, como entrada para un .html. Por ejemplo:

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

Después de probar algunas cosas que descubrí la siguiente solución:

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

Sospecho que esto es un error jQuery, y no está específicamente relacionado con el motor temlate.

Answer 3

Tal vez no esté relacionado con su problema específico, este hilo parece ser un resultado de búsqueda de Google relevante por lo que tal vez ayude a otros que también visiten a través de google.

...

tuve el mismo problema - Tengo un solo archivo HTML (que utilizo como una colección de todos mis plantillas, ahorra peticiones HTTP) que contiene todas mis plantillas en varios bloques de script.

Para extraer bloques simples de HTML de este archivo masivo estaba usando .text() y .contents() - y IE8 no podía manejar eso.

Resulta que la única manera confiable para agarrar el contenido estaba usando html() - por ejemplo:

<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> 

y aquí está la parte de jQuery:

// ... 
"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 
     // ... 
    }); 
}); 

Thx, a Ben Nadel - Hizo la prueba: http://www.bennadel.com/blog/1829-Script-Tags-jQuery-And-Html-Text-And-Contents-.htm

Answer 4

Para IE8, necesita utilizar un shiv HTML5.

que inserta en su Javascript:

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

resultados aquí: Updated jsFiddle

Answer 5

Hey esto podría ser un poco tarde, pero me encontré con este mientras se hace la prueba IE8 en mi aplicación .. Me Estoy haciendo cosas de plantillas similares y ie8 no estaba estilizando cuando inyecté el html.

Salida http://jdbartlett.com/innershiv/

Saludos