javascript文件的變色龍模板？

Question

我正在開發一個簡單的金字塔應用程序，我正在使用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保存在我的頁面模板中？

Answer 1

是; 您通常會將特定於上下文的信息（如擴展路徑）放入模板中，並從（靜態）JavaScript庫中訪問此信息。

包括上下文信息可以通過各種方式完成，具體取決於品味：

您可以在生成的HTML中的標記上使用數據屬性：
```
 <body data-viewurl="http://www.example.com/route/to/view"> ... </body> 
```
然后，在您的靜態JS代碼中加載jQuery .data()函數：
```
 var viewurl = $('body').data('viewurl'); 
```
使用組合的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信息。

直接在模板中生成JS變量，以便從靜態代碼中引用：

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

這些變量可直接與contextVariables.viewurl 。