Шаблоны хамелеона для файлов javascript?

Я разрабатываю простое приложение пирамиды, в котором я использую 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 в своем шаблоне страницы?


person Graeme Stuart    schedule 22.06.2012    source источник


Ответы (1)


Да; обычно вы помещаете контекстно-зависимую информацию, такую ​​как расширенные маршруты, в шаблоны и получаете доступ к этой информации из ваших (статических) библиотек 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.

person Martijn Pieters    schedule 22.06.2012
comment
Я выбрал вариант 2, так как он подходит для того, что я делаю лучше всего. - person Graeme Stuart; 26.06.2012