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 за вклад.

ссылка на оригинал статьи http://habrahabr.ru/post/194072/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *