5

JQueryを使用してAJAXリクエストを実行する単純なピラミッドアプリケーションを開発しています。これまで、カメレオンテンプレート内にJavaScriptコードがありました。次に、JavaScriptを別の場所に抽出します(静的リソースなど)。

私の問題は、JavaScriptコードが次のように動的に生成されたコンテンツに依存していることです。

$.post("${request.route_url('my_view')}",{'data': 'some data'}, function(html){
    $("#destination").html(html);
});

動的要素は次のとおりです。

"${request.route_url('my_view')}"

これは、テンプレート内のリクエストオブジェクトのroute_urlメソッドを呼び出しています。

そのようなjavascriptファイルを独自のテンプレートに分離し、それらのルートとビューを提供するための認識されたパターンはありますか、それとも単にJavaScriptをページテンプレートに保持しますか?

4

1 に答える 1

9

はい; 通常、展開されたルートなどのコンテキスト固有の情報をテンプレートに入れ、(静的) JavaScript ライブラリからこの情報にアクセスします。

好みに応じて、さまざまな方法でコンテキスト情報を含めることができます。

  1. 生成された HTML のタグで data 属性を使用できます。

    <body data-viewurl="http://www.example.com/route/to/view">
        ...
    </body>
    

    次に、jQuery.data()関数を使用して静的 JS コードをロードします。

    var viewurl = $('body').data('viewurl');
    
  2. 作成されたLINK タグの関係を使用して、ドキュメント ヘッドにリンクを含めます。

    <head>
        <link rel="ajax-datasource" id="viewurl"
              href="http://www.example.com/route/to/view" />
        ...
    </head>
    

    $('link#viewurl').attr('href')、またはを使用して取得できます$('link[rel=ajax-datasource]').attr('href')。これは実際には URL 情報に対してのみ機能します。

  3. 静的コードから参照されるように、テンプレートで直接 JS 変数を生成します。

    <head>
        ...
        <script type="text/javascript">
           window.contextVariables = {
               viewurl = "http://www.example.com/route/to/view",
               ...
           };
        </script>
    </head>
    

    これらの変数は で直接参照できますcontextVariables.viewurl

于 2012-06-22T12:42:46.273 に答える