Question

我的jQuery tmpl插件有问题。

这是一个测试用例（由于console.log，它在没有Firebug的Internet Explorer上不起作用）。

文件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，所以唯一的方法是在获取some_inner div之前将数据插入DOM。

所以让我们稍微修改一下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？

Answer 1

注意：下面使用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);

通过AJAX加载部分HTML时，脚本标记中的jQuery模板消失

1 个答案: