Динамические поля формы в Rails3 с jquery - PullRequest
1 голос
/ 07 мая 2011

Я использую rialscasts # 74 в качестве руководства.

Я пытаюсь динамически добавлять поля формы через текстовую ссылку.В эпизоде ​​с Railscast он очень хорошо это делает, используя следующий код:

<!-- layouts/application.rhtml -->
<%= javascript_include_tag :defaults %>

<!-- projects/new.rhtml -->
<div id="tasks">
  <%= render :partial => 'task', :collection => @project.tasks %>
</div>
<p><%= add_task_link "Add a task" %></p>

<!-- projects/_task.rhtml -->
<div class="task">
<% fields_for "project[task_attributes][]", task do |task_form| %>
  <p>
    Task: <%= task_form.text_field :name %>
    <%= link_to_function "remove", "$(this).up('.task').remove()" %>
  </p>
<% end %>
</div>

 # projects_helper.rb

 def add_task_link(name)
    link_to_function name do |page|
      page.insert_html :bottom, :tasks, :partial => 'task', :object => Task.new
    end
 end

Содержимое внутри projects_help.rb - это то, что меня больше всего интересует. Проблема в том, что он делает это через прототип.Я ищу точную копию реализации с использованием jquery (и rails3).Как вы думаете?Спасибо!

Ответы [ 2 ]

14 голосов
/ 07 мая 2011

Да, я собирался сказать - это очень старый Railscast и использует как устаревшие практики, так и старую среду. Я постараюсь помочь вам.

Макеты / application.erb

<%= javascript_include_tag :defaults %>

Проекты / new.erb

<div id="tasks">
  <%= render :partial => 'task', :collection => @project.tasks %>
</div>
<p><%= add_task_link "Add a task" %></p>

Проекты / _task.erb

<div class="task">
<!-- I think this part should still work -->
<%= fields_for "project[task_attributes][]", task do |task_form| %>
  <p>
    Task: <%= task_form.text_field :name %>
    <!-- We're going to be defining the click behavior with unobtrusive jQuery -->
    <%= link_to "remove", "#", :class => 'remove_task'
  </p>
<% end %>
</div>

projects_helper.rb

def add_task_link(name)
  # This is a trick I picked up... if you don't feel like installing a
  # javascript templating engine, or something like Jammit, but still want
  # to render more than very simple html using JS, you can render a partial
  # into one of the data-attributes on the element.
  #
  # Using Jammit's JST abilities may be worthwhile if it's something you do
  # frequently though.
  link_to name, "#", "data-partial" => h(render(:partial => 'task', :object => Task.new)), :class => 'add_task'
end

публичный / JavaScripts / application.js

$(function(){
  // Binds to the remove task link...
  $('.remove_task').live('click', function(e){
    e.preventDefault();
    $(this).parents('.task').remove();
  });

  // Add task link, note that the content we're appending
  // to the tasks list comes straight out of the data-partial
  // attribute that we defined in the link itself.
  $('.add_task').live('click', function(e){
    e.preventDefault();
    $('#tasks').append($(this).data('partial'));
  });
});
5 голосов
/ 10 августа 2011

Текущие RailsCasts / ASCIICasts - # 196 (см. http://asciicasts.com/episodes/196-nested-model-form-part-1) & 197, которые были обновлены для Rails3.

Райан Бейтс также создал гем под названием nested_form (см. https://github.com/ryanb/nested_form), который обрабатывает большую часть этого для вас. Он также создал примеры сложных вложенных форм, используя Prototype, jQuery и его вложенный гем формы; можно найти ссылку на странице nested_forms.

Хорошие вещи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...