2010-11-28 5 views
0

jQuery tmplプラグインに問題があります。一部のHTMLをAJAX経由で読み込むと、スクリプトタグ内のjQueryテンプレートが消えます

試してみるべきテストケースです(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> 

この1つの負荷が罰金 - 私は(警告およびテンプレートのHTMLを取得するには)OKに見えます。

しかし、私は「私は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タグにある場合は、それが引き裂かれないようだ。

しかし、問題があります。

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

は、ブラウザのエンコードせずにテンプレートを右に(ロードする方法はあります:私はスクリプトでのdivにテンプレートを入れていない場合は、ブラウザが私の

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

をsrewsようなので、今それが見えますAJAXで受け取ったデータの一部だけを読み込んだとしても、それらの$ {}はどうですか?

なぜテンプレートスクリプトタグがリッピングされ、誰がそれを実行しているのですか - ブラウザまたはjQuery?

+0

'$("#response_cont ")。html($("#some_inner "、data));'で 'evaledHTML'行を置き換えた場合はどうなりますか? –

+0

'console.log()'はChromeでも動作します(Safariと仮定しています)。 –

+1

@David - 現在のアプローチでは、ブラウザごとに異なる.innerHTMLを使用しています。別のものを削除します:) –

答えて

0

注:以下は何このスクリプトはありませんが、後処理のために、あなたの返されたデータから、任意のスクリプトタグをフィルタであるhttp://plugins.jquery.com/project/getAttributes

を使用しています。スクリプトテンプレートタグは、tmplによって適切に処理されるために、特定の方法で再追加する必要があります。他のスクリプトタグは、document.ready呼び出しを回避するためにhtmlデータが追加された後に挿入されます。

//    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); 
関連する問題