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 中的标记上使用数据属性：

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

    然后，您在静态 JS 代码中使用jQuery.data()函数加载：

    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 回答