ОБНОВЛЕНИЕ: Вот Rails 5 Адаптация этого ответа с использованием CoffeeScript: https://gist.github.com/1456815
jQuery более популярен по веским причинам, в которые я не буду вдаваться. Многое об этом в другом месте.
Если вы хотите использовать jQuery, настройка довольно проста:
# add the following to your Gemfile under `group :development`
gem 'jquery-rails'
# run the following
$ bundle
# then let the generator install
$ rails g jquery:install
А затем обновите настройки расширения JavaScript для Application.rb по умолчанию:
# JavaScript files you want as :defaults (application.js is always included).
config.action_view.javascript_expansions[:defaults] = %w( jquery rails )
И убедитесь, что ваш файл макета (например, application.html.erb) включает эти файлы:
<%= javascript_include_tag :defaults %>
По поводу вашего модального подхода есть много мнений о том, как это сделать. Лично я предпочитаю закатывать свои модальные окна в зависимости от потребностей приложения. Это всего лишь несколько строк jS-jQuery-сошника для создания модалов, которые действительно хорошо работают с Rails.js:
# in a view, perhaps a _modal.html.erb partial that is included into
# your layout (probably at the bottom).
<div id="modal-container"></div>
<div id="modal">
<a href="#" class="close">close</a>
</div>
Вот несколько стилей (стиль scss) для модала, который я использую:
#modal-container {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
#modal {
display: none;
position: absolute;
width: 600px;
left: 50%;
margin-left: (-600px - 40px) / 2;
padding: 20px;
background: #fff;
border: 5px solid #eee;
& > .close {
position: absolute;
right: 5px;
top: 5px;
color: #666;
&:hover, &:active {
color: #000;
}
}
}
Это убирает стили / представления с пути. Возможно, вы захотите настроить эти стили так, чтобы они лучше подходили вашему приложению, но они довольно общие, поэтому они должны работать для запуска.
Чтобы интегрировать его в Rails, есть 2 части. Во-первых, вам нужно, чтобы браузер отправлял AJAX-запросы на контент и показывал модал по возвращении. Во-вторых, вам нужен Rails, чтобы ответить соответствующим ответом.
Отправка AJAX и обработка ответов влечет за собой использование :remote => true в ссылках / формах, которые вы хотите отправить удаленно.
<%= link_to 'New Post', new_post_path, :remote => true %>
Это создаст атрибут данных в ссылке, которую будет использовать Rails.js, что позволит автоматически отправлять его удаленно. Он ожидает возврата javascript и выполнит этот ответ, когда получит его. Вы можете добавить быстрый format.js к каждому блоку действий respond_to и создать сопровождающий файл new.js.erb, который содержит JS, необходимый для фактического заполнения и отображения модального окна. Это нормально, но мы можем СУШИТЬ его немного больше, вернув шаблон без макета и перенеся модальное отображение / скрытие обязанностей в application.js:
# in your app controller, you'll want to set the layout to nil for XHR (ajax) requests
class ApplicationController < ActionController::Base
layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' }
end
Javascript, чтобы заставить все это работать:
# in application.js
$(function(){
var $modal = $('#modal'),
$modal_close = $modal.find('.close'),
$modal_container = $('#modal-container');
# This bit can be confusing. Since Rails.js sends an accept header asking for
# javascript, but we want it to return HTML, we need to override this instead.
$('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
});
# Handle modal links with the data-remote attribute
$('a[data-remote]').live('ajax:success', function(xhr, data, status){
$modal
.html(data)
.prepend($modal_close)
.css('top', $(window).scrollTop() + 40)
.show();
$modal_container.show();
});
# Hide close button click
$('.close', '#modal').live('click', function(){
$modal_container.hide();
$modal.hide();
return false;
});
});
У меня есть некоторая логика для позиционирования модального окна 40px из текущей позиции прокрутки браузера.
С учетом всех этих частей, когда вы нажимаете на ссылку / форму с удаленным набором атрибутов, Rails.js будет обрабатывать отправку запроса, ваше приложение будет знать, что нужно вернуть только шаблон для действия без макета, идеально подходит для отображения его в модальном окне, и тогда наш вышеупомянутый javascript подключится к обратному вызову ajax: success из Rails.js и отобразит модальное с шаблоном HTML, возвращенным из нашего приложения.
Существует более одного способа облысения кошки и более десятка способов создания этой функциональности. Это определенно та область, в которой команда Rails еще должна установить более строгие соглашения. Это просто мой способ справиться с этим, который я считаю довольно СУХИМ, требует минимальных усилий, достаточно гибок и ориентирован на будущее. Возможно, одна из областей, на которой кто-то мог бы опираться, это использование фреймворка для модальных / лайтбоксов, который охватывает больше баз и является более функциональным. И если кто-то это сделает, я бы с удовольствием посмотрел статью!