0

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

测试.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" 的内部部分，而且我还需要执行 Javascript，所以唯一的方法是在获取 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？

4

1 回答 1

0

注意：下面使用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);
于 2011-03-04T10:10:23.963 回答