4

このサイトのおかげで、Mojolicious と Perl を少しずつ学んでいます。Jquery get 呼び出しの結果に基づいて、ページの一部を動的に更新する最善の方法を決定しようとしています。

現時点では、このようなテンプレートがあります (Mojo の寄稿者の 1 人である Joel に感謝します)。

<!DOCTYPE html>
<html>
 <head>
  <title><%= title %></title>
 </head>
 <body>
  %= content
  %= include 'common_js'
  %= content_for 'js_imports'
 </body>  
</html>

次に、以下のように、このレイアウトを使用するページがあります。

%title 'Script Test'; 
% content_for 'js_imports' => begin 
%= javascript begin 
  $(document).ready(function(){ 
    $("input#testbutton").click(function(){ 
      $.get('<%= url_for('testbutton') %>', 
        function (data) { 
            $("div#content").html(data);  
         }); 
      }) 
   }); 
 % end 
 % end 

<p>Main Page</p> 
<input type="button" id="testbutton" class="btn btn-danger" value="test"> 
<div class="span9" id="content"></div><!--/span9-->

したがって、「testbutton」がクリックされると、get リクエストから id コンテンツを含む div への応答を書き込みます。

私が取得している「データ」は次のとおりです。

% content_for 'js_imports' => begin 
  %= javascript begin 
    $(document).ready(function(){ 
      $("input#testbutton2").click(function(){ 
        alert('testbutton2 clicked'); 
    }); 
    }); 
  % end 
% end    

<p>Test Button Clicked</p> 
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">

現在、上記の JavaScript がページに埋め込まれていません。content_for js_imports がDOMに存在しなくなったためだと思います。テスト ページに「content_for」タグを追加できますが、ID コンテンツを含む DIV 内にスクリプトが追加されます。私が何とか達成しようとしているのは、既存のスクリプトの下のページの最後にスクリプトを追加することです。JavaScript を使用してスクリプトを追加および削除できることはわかっていますが、タグ ヘルパーを使用してそれを行う方法があるかどうか疑問に思っていました。

4

1 に答える 1

2

取得したデータを content_for ブロックに含める必要はありません。直接含めるだけです：

%= javascript begin 
  $(document).ready(function(){ 
    $("input#testbutton2").click(function(){ 
      alert('testbutton2 clicked'); 
  }); 
  }); 
% end 

<p>Test Button Clicked</p> 
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">

また、既存のコンテンツを置き換えたくないが、追加するだけの場合は、append代わりに次を使用しますhtml。

$("div#content").append(data);

Joel Berger (コメント) は、あなたが望むものを示す素敵なパスティを作成しました。

于 2013-03-30T00:29:18.987 に答える