Как я могу сделать AJAX-y условным полем отображения / скрытия формы в Rails?

Question

Я хотел бы показать или скрыть несколько полей в форме в Rails, в зависимости от состояния поля выбора в форме. Мне (в настоящее время) не нужен второй поиск в базе данных для полей, поэтому я стараюсь, чтобы все это было ограничено представлением. Я набросал наброски, но у меня возникли проблемы с деталями реализации.

Первоначально я думал использовать observe_field, вызывать Element.show и т. Д. И т. Д., Но тогда мне придется написать условное выражение Javascript. Это, вероятно, должно сработать, но я хочу избежать этого, если смогу.

Другой подход заключается в использовании observe_field для запроса шаблона RJS и replace_html для вставки полей. Неплохо, но так как я использую блок form_for, мне нужно было бы либо пропустить экземпляр формы через шаблон RJS, чтобы сделать это правильно.

Я мог бы также обновлять запись при каждом проходе и отображать форму в новых условиях, но я стараюсь избегать этого. Было бы намного проще просто сделать все это в представлении.

Что мне здесь не хватает? Какова практика для условных форм показа / скрытия в Rails?

Answer 1

Как разработчик рельсов, я предлагаю придерживаться принципов ненавязчивого JavaScript. Когда дело доходит до рельсов, обычно это означает, что вы не должны просто написать одно большое представление для обработки всех ваших функций. Это облегчает разработку и поддержку вашего представления HTML, упрощает поддержку вашего поведения и, как правило, помогает лучше понять, что именно делает ваше приложение. В этой связи я избегаю рельсовых помощников по javascript любой ценой.

Что бы я сделал, это разделил ваше поведение на файл javascript, который вы сами кодировали. Используя библиотеку, такую ​​как jquery (мой любимый для такого рода вещей - lowpro, но я буду первым, кто признает, что я немного настроен), довольно легко прикрепить обработчик событий к определенным элементам (или целый класс элементов сразу).

Для поля выбора обработчик onChange будет запущен, когда пользователь изменит выбор. свойство selectedIndex элемента сообщит вам, какая опция выбрана, а массив options позволит вам найти связанную опцию. Итак, в вашем обработчике вы можете сделать что-то вроде следующего (используя прототип):

function(e) {
  var element = Event.element(e)
  var index = element.selectedIndex
  var option = element.options[index]

  if(option.value == "Show fields")
    $('hidden-fields').show()
  else
    $('hidden-fields').hide()
}

Answer 2

Я обращаюсь к одной и той же вещи несколькими разными способами:

<%= link_to_function( check_box_tag "model[attribute_name]" ) do |page| 
    page.toggle :model_attribute_name
end-%>

<span style="display:none;" id="model_attribute_name">  
<%= f.text_area :other_conditional_attribute -%>  
</span>

или

<%= link_to_function "Conditional Item", :class => "your-style-class" do |page| 
    page.insert_html :bottom, :other_conditional_attribute, :partial => 'conditional_attribute_partial', :object => Object.new, :locals => {:local_variable => local_variable}
end-%>

Помощники по RJS / прототипу просто потрясающие.
Rails API: PrototypeHelpers
Rails API: JavascriptHelpers

Answer 3

Я бы предложил использовать простую функцию JQuery, например:

$('a#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });

Для основ шоу / скрытия в Jquery есть учебник здесь .