Как использовать AJAX с несколькими вложенными формами? Задача «План спортзала» - PullRequest
3 голосов
/ 13 августа 2011

Я хочу иметь возможность заполнить таблицу некоторыми данными через AJAX.Моя проблема в том, что эти данные взяты из двух разных моделей.Это будет долго, но, пожалуйста, потерпите меня.

Представьте себе приложение, которое заполнило бы план тренировок в спортзале (явно не для меня: D).В этом плане есть много подпрограмм (для каждого типа или дня), в которых нужно пройти много шагов.

Можно ли использовать AJAX для заполнения красивой таблицы, которая динамически заполняется?В идеале я бы предпочел сохранять и отображать таблицу каждый раз, когда пользователь заполняет любые новые данные.

Что у меня есть:

В моделях, которые я добавил, свойство accepts_nested_attributes_for.

Я использую nested_form , которая позволяет нам добавлять и удалять вложенные модели.

Давайте посмотрим на нашу форму:

  • app /Представления / планы / _form.html.erb

    <%= nested_form_for @plan, :url => plan_path(@plan), :html => { :class => :form } do |f| %>
      <%= f.label :name, "Plan Name" %>
      <%= f.text_field :name %>
      <%= f.fields_for :routines do |r| %>
        <%= render 'routine_fields', :f => r %>
      <% end %>
      <%= f.submit %>
      <%= f.link_to_add "Add a routine", :routines %>
    <% end %>
    

Таким образом, fields_for позволяет нам сохранить много процедур внутри плана, NICE!Давайте определим наши поля views:

  • app / views /plan / _routine_fields.html.erb

    <%= f.label :name, "Routine Name" %>
    <%= f.text_field :name %>
    <%= f.fields_for :steps do |s| %>
      <%= render 'step_fields', :f => s %>
    <% end %>
    <%= f.link_to_add "Add a step", :steps %>
    <%= f.link_to_remove "Remove this routine" %>
    
  • app / views /plan /_step_fields.html.erb

    <%= f.label :name, "Step Name" %>
    <%= f.text_field :name %>
    <%= f.link_to_remove "Remove this step" %>
    

Это прекрасно работает!Мы можем добавить столько подпрограмм в план и множество шагов в подпрограмме, чтобы создать полный план в одном представлении.

НО УГРОЗНО!а также очень запутанно!Итак, моя проблема снова: как бы я обновлял таблицу каждый раз, когда пользователь заполняет какие-либо новые данные?

Идеально:

Ideal Example

1 Ответ

0 голосов
/ 21 апреля 2013

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

Для работы с формами вы можете проверить railscast на wicked

Для работы с ajax есть очень хороший railscast на ajax / jquery

Вы также можете разбить эту логику на несколько частей и немного изменить UX, чтобы пользователь по-прежнему имел те же функции, но он жил в другом представлении. Вы можете добавить ajax к этому, следуя ранее упомянутому ajax railscast или используя turbolinks gem (хотя turbolinks немного отличается).

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

...