Метод asset_path в javascript коде rails приложения

в 10:26, , рубрики: javascript, ruby on rails, метки: ,

В Rails-приложениях с богатой клиентской частью используют шаблоны на стороне клиента. Если эти шаблоны обрабатываются с помощью Asset Pipeline, то встаёт вопрос о способе обращения к ним. В production-окружении путь до файла складывается из его имени и md5-хеша. Один из вариантов получить нужный путь — обернуть JavaScript в препроцессор Erb, где будет доступен нужный хелпер <%= asset_path(path/to/template.html) %>

Мы будем внедрять более красивое решение.

Пусть мы имеем некоторое приложение, где используются шаблоны на стороне клиента. Препроцессор для шаблонов выберем Slim [1]. Не будем заострять внимание на способе организации исходников в проекте. Пусть все наши шаблоны лежат в app/assets/webapp/. Настроим наше приложение так, чтобы оно подхватывало шаблоны *.html.slim из нашей директории с шаблонами:

# config/application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'webapp')

# config/initizlizers/assets_engine.rb
Rails.application.assets.register_engine('.slim', Slim::Template)

# config/environments/production.rb
config.assets.precompile += ['*.html']

Мы создали некий шаблон app/assets/webapp/rubrics/edit.html.slim и хотим к нему обратиться из JavaScript. Обратиться по адресу /assets/rubrics/edit.html мы не можем, так как в production-окружении такого файла не будет, а будет нечто /assets/rubrics/edit-5eb3bb250d5300736006c8944e436e3f.html. Таблица соответствия между логическим путём rubrics/edit.html и полным лежит в файле-манифесте, который генерируется автоматически. Но использовать его не всегда оправдано, он как минимум содержит много лишних данных.

Gem js_assets решает задачу составления таблицы соответствия для файлов, подпадающих под определённую маску.

После установки гема подключим JavaScript-хелпер:

// app/assets/javascripts/application.js

//= require app_assets

Таблица соответствия будет храниться в переменной window.project_assets. Метод хелпер asset_path принимает в качестве аргумента логический путь до необходимого файла и возвращает относительный от корня путь с учётом окружения.

var path = asset_path('rubrics/edit.html')
// the function will return for development:
// /assets/rubrics/edit.html
// and for production
// /assets/rubrics/edit-5eb3bb250d5300736006c8944e436e3f.html

Управление списком доступных файлов (с учётом обработки asset pipeline) для хелпера осуществляется через фильтры. Их значения по умолчанию:

JsAssets::List.exclude = ["application.js"]
JsAssets::List.allow = ["*.html"]

Расширить их можно например с помощью initializers.

Исходный код gem можно найти на github.

Автор: Kavkaz

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js