PluggableJs – простой и удобный способ подключения джаваскрипта на определенных страницах

Предисловие

Если вы используете Rails >= 3.1 с включенным asset pipeline, то конечно знаете, что все скрипты под директивой require_tree (а речь пойдет именно о них) сжимаются в один файл и, соответственно, отрабатывают на всех страницах. Но что делать, если кусок джаваскрипта нужен только на одной странице и совсем не нужен на другой? Behold! Именно эту задачу решает pluggable_js.

Почему джем

Ведь существуют и другие способы (надеюсь, никто не пишет код во вью). Самый очевидный, пожалуй, – написать в требуемом шаблоне:

<% content_for :head do %>
  <%= javascript_include_tag 'my_fancy_js' %>

и исключить файл из require_tree. Но минус такого подхода в том, что скрипты, относящиеся определенному контроллеру, не находятся в одном месте (а значит тяжелее искать и разбираться). В довесок, если кусок кода большой, то мы теряем преимущества пайплайна. Решение, используемое в джеме, сводит до минимума описанные недостатки.

Как это работает

Вы выбираете котроллер и экшны, в которых необходим кастомный скрипт, и запускаете генератор:

rails generate pluggable_js Post index new

Он сгенерит два файла, в которых будут вызываться функции Post.index() и Post.new(), после того как загрузится DOM:

app/assets/javascripts/pluggable/posts/index.js.coffee
app/assets/javascripts/pluggable/posts/new.js.coffee

Теперь вам осталось просто описать их в posts.js.coffee:

window.Post ||= {}
Post.index = () ->
  # your code goes here
Post.new = () ->
  # and here

А хелпер <%= javascript_pluggable_tag %>, прописанный в лейауте, подключит файл, если сопоставит путь и значения текущих параметров контроллер/экшн. Да, происходит дополнительный запрос на сервер, но это всего лишь триггер.

* Я опустил необязательные для описания идеи тонкости, поэтому см. подробную инструкцию.

Конфиг

Предположим, вы создали экшн search, который (как и экшн index) рендерит шаблон index. Получается, что функцию Post.index() также необходимо вызвать. Для этого можно создать config/initializers/pluggable_js.rb и воспользоваться настройкой:

PluggableJs.config do |config|
  config.pair_actions = { 'search' => 'index' }
end

{ 'create' => 'new', 'update' => 'edit' } прописаны по умолчанию.

В итоге

Все скрипты, относящиеся к контроллеру, находятся в одном месте. Все кастомные функции попадают в пайплайн. И, наконец, мы полностью очистили вью от каких-либо упоминаний о js.

Спасибо verybigman и ExReanimator за вклад.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK