Rails - fields_for和javascript动态添加和删除表单中的字段(railscasts ep.196-197)

时间:2014-08-31 01:05:01

标签: javascript ruby-on-rails railscasts fields-for

更新

感谢您的回答。

但如果我删除

for requested_role in @project.requested_roles
从部分

开始,我无法访问requested_role.role值,因为我没有从代码中获取参数X

for X in @projects.requested_roles 

我不能写X.role

如何在不使用for或.each滚动项目的requested_roles的情况下访问此值?

END UPDATE


我使用Ruby on Rails开发的社交网络存在问题。我按照railscasts 196197创建了一个包含fields_for的表单,并使用javascript添加了dinamically字段,但我遇到了两个主要问题。

用户可以创建项目,此项目必须具有1+ Requested_roles。 当我打开项目编辑页面来更改角色时,如果项目有N个requested_roles,我会看到N * N个表单来更改requested_roles。因此,如果我有2个requested_roles(例如Director和Producer),我会看到4个选择字段,Director - Producer - Director -Producer。它们重复N次。我无法修改它们,因为我可以拥有每种类型的最大1个requested_role。如果我只有1个requested_role(因为1x1 = 1)

,那很好

Project.rb

class Project < ActiveRecord::Base
attr_accessible :title, :requested_roles_attributes, :video, :num_followers, :num_likes

belongs_to :user

has_many :requested_roles, dependent: :destroy
accepts_nested_attributes_for :requested_roles, :reject_if => lambda { |a| a[:ruolo].blank? }, :allow_destroy => true

Requested_role.rb

class RequestedRole < ActiveRecord::Base
attr_accessible :role, :project_id 

belongs_to :project

Projects_controller.rb

class ProjectsController < ApplicationController

def new
  @project= Project.new
  @requested_role= @project.requested_roles.build    
end   

项目/ edit.html.erb

<div class="row">
 <div class="span6 offset3">
  <%= form_for(@project) do |f| %>
    <%= render 'shared/error_messages', object: f.object%> 

    <%= f.label :title, "Project title" %>
    <%= f.text_field :title %>

    <%= f.fields_for :requested_roles do |builder| %>
          ciao
         <%= render 'requested_role', :f => builder   %>

    <% end %>

    <div class="fields">
    <p><%= link_to_add_fields "Add requested role", f, :requested_roles %></p>
    </div>

    </br>

    <%= f.submit 'Apply changes', class: 'btn btn-large btn-primary' %>

  <% end %>
</div>
</div>

我认为错误在此视图中(项目/编辑):

    <%= f.fields_for :requested_roles do |builder| %>
          ciao
         <%= render 'requested_role', :f => builder   %>
    <% end %>

此代码,即使没有部分代码,也会导致N次重复的requested_roles。事实上,如果没有部分_requested_role,我们就有N&#34; ciao&#34;,但我们应该只有一个。

项目/ _requested_role.html.erb

<% if @project.requested_roles.any? %>
    <p>Modifica ruoli richiesti </p>
<%end%>
<%= @project.requested_roles.count %>
<% for requested_role in @project.requested_roles %>
    <div class="fields">

    <p>
    <p>Requested role: <%= role_to_string(requested_role.role) %></p>

    <%= f.label :role, "Modify role" %>
    <%= f.select :role, options_for_select([["Regista",1],["Sceneggiatore", 2],["Direttore della fotografia", 3], ["Operatore",4],
                                      ["Fonico", 5], ["Montatore", 6], ["Truccatrice",7], ["Costumista",8], ["VFX Artist",9],
                                      ["Produttore", 10], ["Attore",11], ["Attrice",12], ["Grip/Runner",13]], :selected => requested_role.role) %>


    <%= link_to_remove_fields "remove", f %>    #dinamically remove a field
    </p>

<% end %>

</div>
你能帮帮我吗?我无法弄清楚错误的位置。提前谢谢。

另一个问题与dinamically删除和添加requested_roles(javascript-jquery)的链接有关。

如果我有3个requested_roles(9个选择字段而不是3个,因为我之前提到的错误)并且我删除(通过link_to_remove_fields)最后一个没有问题。但是,如果我删除第一个字段,字段甚至它下面的提交按钮都会消失,我无法修改角色或提交更改。

当我添加(通过link_to_add_fields)一个新角色时,我已经拥有2个requested_roles(Director,Producer),当我点击链接添加新的requested_role时,会出现另一个错误。而不是选择字段来选择角色,将显示2个现有选择字段(Director,Producer)的副本。

application_helper.rb

def link_to_remove_fields(name, f)
  f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end


def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize, :f => builder)
  end
  link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")
end

的application.js

function remove_fields(link) {
    $(link).prev("input[type=hidden]").val("1");
    $(link).closest(".fields").hide();
}


function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(link).parent().before(content.replace(regexp, new_id));
}

我无法理解出了什么问题。如果你有一些想法可以给我一些建议吗?非常感谢你。

的Dario

1 个答案:

答案 0 :(得分:2)

问题是你要重复两次。

<%= f.fields_for :requested_roles do |builder| %>
  ciao
  <%= render 'requested_role', :f => builder   %>
<% end %>

将自动为每个请求的角色重复requested_role部分。这就是它显示&#34; ciao&#34; N次,因为那是在渲染时所做的fields_for。您可能需要阅读文档以了解其工作原理:http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-fields_for

所以没有必要

for requested_role in @project.requested_roles

在你的部分。它只会在每次fields_for呈现时重复所有请求的角色。这是您的代码在edit.html.erb

中的样子
<% if @project.requested_roles.any? %>
  <p>Modifica ruoli richiesti </p>
<%end%>

<%= @project.requested_roles.count %>

<%= f.fields_for :requested_roles do |builder| %>
   <%= render 'requested_role', :f => builder   %>
<% end %>

<p><%= link_to_add_fields "Add requested role", f, :requested_roles %></p>

requested_role部分应该只是:

<div class="fields">
  <div>
    <p>Requested role: <%= role_to_string(f.object.role) %></p>

    <%= f.label :role, "Modify role" %>
    <%= f.select :role, options_for_select([["Regista",1],["Sceneggiatore", 2],["Direttore della fotografia", 3], ["Operatore",4],
                                  ["Fonico", 5], ["Montatore", 6], ["Truccatrice",7], ["Costumista",8], ["VFX Artist",9],
                                  ["Produttore", 10], ["Attore",11], ["Attrice",12], ["Grip/Runner",13]], :selected => f.object.role) %>


    <%= link_to_remove_fields "remove", f %>
  </div>
</div>

修复你的部分应修复链接的第二个问题。

您可能需要考虑将Ryan的宝石用于nested_forms

https://github.com/ryanb/nested_form