Шаблоны jQuery с элементами html5 в ie8 - PullRequest
Новая
       19

Шаблоны jQuery с элементами html5 в ie8

8 голосов
/ 03 марта 2011

Возможно, я спрашиваю слишком много, но я пытаюсь получить шаблоны jQuery с элементами html5, работающими в ie8.Я использую head.js, так что это регистрация элементов html5, я также пробовал html5shiv, но не повезло.Есть другие элементы html5 на странице, которые работают нормально, но система шаблонов jquery ничего не возвращает, если я использую элементы html5 в шаблоне.

Вот пример одного из моих шаблонов: 

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

Если я изменю элементы html5 на divs и все такое, шаблон работает в ie8.Я должен отметить, что этот шаблон работает во всех других браузерах, нет ничего удивительного в этом ...

Я собрал jsfiddle, демонстрирующий мой шаблон: http://jsfiddle.net/keegan3d/E6EbG/1/

Есть ли способ получить эти html5?элементы, работающие в ie8?

Ответы [ 5 ]

2 голосов
/ 26 августа 2011

Эй, это может быть немного поздно, но я сталкивался с этим, когда проводил тестирование ie8 в своем приложении. Я делаю подобные вещи с шаблонами, и ie8 не стилизовал его при внедрении html.

Проверить http://jdbartlett.com/innershiv/

Приветствия

2 голосов
/ 18 марта 2011

Я столкнулся с этой проблемой сам. Проблема возникает в IE8 с элементами html 5 при использовании объекта jQuery, который возвращается функцией шаблона, в качестве входных данных для .html. Например: 

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

Попробовав некоторые вещи, я обнаружил следующий обходной путь: 

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.

1 голос
/ 04 апреля 2011

Возможно, это не связано с вашей конкретной проблемой, эта тема является релевантным результатом поиска в Google, поэтому, возможно, она поможет другим пользователям, которые также заходят через Google.

...

У меня была такая же проблема - у меня есть один HTML-файл (который я использую в качестве коллекции для всех моих шаблонов, сохраняет HTTP-запросы), содержащий все мои шаблоны в различных блоках скриптов.

Чтобы извлечь отдельные блоки HTML из этого файла, я использовал .text () и .contents () - и IE8 не смог справиться с этим.

Оказывается, что единственным надежным способом получения контента было использование .html () - e.x: 

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

// ...
"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

0 голосов
/ 24 апреля 2011

Для IE8 вам нужно использовать HTML5 shiv.

Я вставил в ваш Javascript: 

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

результаты здесь: Обновлен jsFiddle

0 голосов
/ 04 марта 2011

Хотя на самом деле это не ответ, я могу подтвердить, что у меня похожая проблема. В некоторых случаях содержимое отказывается отображаться, в других случаях стили, нацеленные на элементы html5, отказываются применять. Изменение новых элементов html5 на div делает все, что я ожидаю.

...