Шаблоны jQuery в тегах сценария исчезают при загрузке частичного HTML через AJAX - PullRequest
Новая
       19

Шаблоны jQuery в тегах сценария исчезают при загрузке частичного HTML через AJAX

0 голосов
/ 28 ноября 2010

У меня проблема с плагином jQuery tmpl.

Вот вам пример теста (из-за console.log он не работает в Internet Explorer без Firebug).

Файл ajaxed_tpl.html: 

<div id="some_inner">
    <script id="my_tmlp" type="text/x-jquery-tmpl">
        <li>
            <img src="${imgSource}" alt="image" />
            <h2> ${username} </h2>
        </li>
    </script>

     <script type="text/javascript">
            alert('I am here!');
     </script>
</div>
<div> I don't need this through AJAX</div>

test.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.tmpl.js"></script>
    </head>
    <body>
    <div id="response_cont"></div>
        <script type="text/javascript">

             $.ajax({
                  type: "GET",
                  url: "ajaxed_tpl.html",
                  cache: false,
                  success: function(data) {

                        // it is ok if I fill entire data into HTML
                        $("#response_cont").html(data);
                        console.log($("#my_tmlp").html());  
                 }
            });
        </script>
    </body>
</html>

Этот загружается нормально - я получаю предупреждение, и шаблон html () выглядит нормально.

Но я также получаю строку «Мне это не нужно через AJAX».Очевидно, что мне нужно загрузить только внутреннюю часть div id = "some_inner", но также мне нужно выполнить Javascripts, поэтому единственный способ сделать это - вставить данные в DOM, прежде чем я получу some_inner div.

Итак, давайте немного изменим test.html: 

success: function(data) {
                        // I need only the certain element with all the scripts and templates inside
                        var evaledHtml =  $("<div>").html(data).find("#some_inner").html();
                        $("#response_cont").html(evaledHtml);

                        // at this point Javascripts got executed, I get that alert()
                        console.log($("#my_tmlp").html());  
                        // but the template script is gone - console logs null!!!  
                 }

О, чувак, куда делся шаблон?Почему Javascript в тегах сценария был выполнен, а шаблон в тегах сценария пропал?

Но теперь давайте изменим шаблон в ajaxed_tpl.html: 

<div id="my_tmlp" style="display:none;">
        <li>
            <img src="${imgSource}" alt="image" />
            <h2> ${username} </h2>
        </li>
</div>

и снова запустим test.html.,Ура!На этот раз console.log выводит наш шаблон!Кажется, если он находится в тегах div, он не извлекается.

Но есть проблема.Если я поместил шаблон в div, а не в скрипт, браузер выкинет мой 

<img src="${imgSource}" alt="image" />

, и теперь он выглядит так: 

<img src="$%7BimgSource%7D" alt="image">

Есть ли способ загрузить шаблон правильно(без кодирования в браузере этих $ {}), даже если я загружаю только часть данных, полученных через AJAX?

Почему вырываются эти теги шаблонных скриптов и кто это делает - браузер или jQuery?

1 Ответ

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

Примечание: ниже использует http://plugins.jquery.com/project/getAttributes

. Этот сценарий отфильтровывает любые теги сценария из возвращенных данных для последующей обработки.Теги шаблонов скриптов должны быть повторно добавлены определенным образом, чтобы они правильно обрабатывались tmpl.Другие теги сценария вставляются после добавления html-данных для обхода любых вызовов document.ready. 

//              remove any scripts from the data                
                var $data = $('<span />').append($(data).filter(':not(script)'));

//              find the scripts so they can be added post element appended. this fixes document.ready bugs
                var $scripts = $(data).filter('script');

//              capture template scripts and add them as scripts 
//              bit of a ball ache but still does the job.
                var $template_scripts = $scripts.filter('[type="text/x-jquery-tmpl"]');
                $template_scripts.each(function()
                    {   
                        var $script = $('<script />'),
                            attr = $.getAttributes($(this));
                        $script.attr(attr);
                        $data.append($script); 
                        $script.text($(this).html());
                    });

//              append the html
                $("#response_cont").html($data); 

//              finally add the scripts after the html has been appended to work around any $(document).ready declarations in your scripts
                $(document).append($scripts);
...