使用RoR了解Fields_for

时间:2016-11-21 00:25:08

标签: ruby-on-rails ruby

User.rb

has_and_belongs_to_many :accounts

Account.rb

has_and_belongs_to_many :users

我的模型有我的关联。我试图使嵌套表单适用于构建用户和帐户。现在我正试图在form_for内嵌入一个基本的form_for,感觉非常严重,所以我正在试验fields_for。我的基本问题是,如果我处理嵌套表单,如何设置注册控制器这就是我现在所拥有的。

控制器

def new
  @user = User.new
  @account = Account.new
end

VIEW

<%= render "shared/errors", object: @user %>
<div class="account-details" data-account-form-group="1">
  <div class="new-account-accept__header">
    <h1 class="heading-1">Create a New Account</h1>
    <span><p>This will only take a couple seconds and then</span></p>
    <span><p>you can get to work.</p></span>
  </div>

  <div class="new-account-accept__form">
    <%= form_for(@user, url: user_registration_path, html: { id: "signup-form", autocomplete: "off"}) do |f| %>
    <label clas="name-label">
      <%= f.text_field :name, placeholder: "Name", class: "form-labels" %>
    </label>

    <label class="email-label">
      <%= f.text_field :email, placeholder: "Email", class: "form-labels" %>
    </label>

    <label class="password-label">
      <%= f.password_field :password, placeholder: "Password", class: "form-labels" %>
    </label>

    <div class="form-actions">
      <span class="button-text close"><%= link_to "Cancel", root_path %></span>
      <input type="button" data-plan-form-next />
      <span class="button">Create Account</span>
    </div>
  </div>
</div>

<div class="project-details" data-account-form-group="2">
  <%= render "project" %>
</div>
  

项目部分

    <div class="account--new-account">
  <%= form_for @account, html: { class: "plan-select-form" } do |f| %>
    <%= render "shared/errors", object: @account %>

    <div data-plan-form-group="1">
      <div class="new-project-info">
        <h1 class="heading-1">New Project</h1>
        <p class="p-body">
          <span>Choose a name for your project.</span>

          <span>This will make your project easier to identify.</span>
        </p>
        <label>
          <%= u.text_field :name, required: true %>
        </label>

        <h3>Select a Plan for this Project</h3>

        <h4>Most Popular Project Plan</h4>
      </div>

      <ol class="plan-picker">

        <!-- Little Birdy -->
        <li class="plan-picker__plan">
          <div class="plan-picker__plan__header">
            <div class="plan-icon little-birdy"></div>
            <h6 class="plan-size">SMALL</h6>
            <h5 class="plan-name">Little Birdy</h5>
            <p class="plan-summary">Designed for individuals that need basic monitoring on a Project.</p>
          </div>
          <div class="plan-picker__plan__body">
            <ul>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %><strong>3</strong> Snitches</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Basic Intervals</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> API</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Field Agent</li>
            </ul>
          </div>
          <div class="plan-picker__plan__footer">
            <h4>
              <span class="dollar">$</span>9<span class="period">monthly</span><span class="cents">00</span>
            </h4>
            <label>
              <input type="radio" name="slug" id="little_birdy" value="little_birdy" required data-plan-form-next data-plan-name="little Birdy" data-plan-price="9" />
              <span class="button">Select</span>
            </label>
          </div>
        </li>

        <!-- Private Eye -->
        <li class="plan-picker__plan plan-picker__plan--best">
          <div class="plan-picker__plan__header">
            <div class="plan-icon private-eye"></div>
            <h6 class="plan-size">MEDIUM</h6>
            <h5 class="plan-name">Private Eye</h5>
            <p class="plan-summary">Great for small teams that need increased monitoring coverage options on a Project.</p>
          </div>
          <div class="plan-picker__plan__body">
            <ul>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %><strong> 100</strong> Snitches</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Enhanced Invtervals</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> API</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Field Agent</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Integrations</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Up to <strong>5</strong> team members</li>
            </ul>
          </div>
          <div class="plan-picker__plan__footer">
            <h4>
              <span class="dollar">$</span>29<span class="period">monthly</span><span class="cents">00</span>
            </h4>
            <label>
              <input type="radio" name="slug" id="private_eye" value="private_eye" required data-plan-form-next data-plan-name="Private Eye" data-plan-price="29" />
              <span class="button">Select</span>
            </label>
          </div>
        </li>

        <!-- Surveillance Van -->
        <li class="plan-picker__plan">
          <div class="plan-picker__plan__header">
            <div class="plan-icon surveillance-van"></div>
            <h6 class="plan-size">LARGE</h6>
            <h5 class="plan-name">Surveillance Van</h5>
            <p class="plan-summary">Perfect for larger teams that need maximum monitoring power on a Project.</p>
          </div>
          <div class="plan-picker__plan__body">
            <ul>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %><strong> 300</strong> Snitches</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Strandard + Enhanced Intervals</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> API</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Field Agent</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Integrations</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Up to <strong>5</strong> team members</li>
              <li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Smart Alerts and Error Notices</li>
            </ul>
          </div>
          <div class="plan-picker__plan__footer">
            <h4>
              <span class="dollar">$</span>79<span class="period muted">monthly</span><span class="cents">00</span>
            </h4>
            <label>
              <input type="radio" name="slug" id="surveillance_van" value="surveillance_van" required data-plan-form-next data-plan-name="Surveillance Van" data-plan-price="79" />
              <span class="button">Select</span>
            </label>
          </div>
        </li>
      </ol>

      <!-- The Lone Snitch -->
      <div class="lone-snitch">
        <div class="lone-snitch__header">
          <div class="plan-icon the-lone-snitch"></div>
          <div class="plan-name">
            <h3>TRIAL (one per account)</h3>
            <h1>The Lone Snitch</h1>
          </div>
        </div>
        <div class="lone-snitch__body">
          <h2>1 single solitary Snitch</h2>
        </div>
        <div class="lone-snitch__footer">
          <h4>
            <span class="dollar">Free</span>
          </h4>
          <label>
            <span class="radio"><input type="radio" name="slug" id="the_lone_snitch" value="the_lone_snitch" checked="checked" /></span>
            <%= u.submit "Select", class: "button" %>
          </label>
        </div>
      </div>

      <span class="email">Need more than what you see here? <a href="mailto:hi@deadmanssnitch.com">Get in touch.</a></span>
    </div>

    <div class="payment-details hidden" data-plan-form-group="2">
      <%= render "shared/payment", f: f %>
    </div>
  <% end %>
</div>

我知道它有很多代码,但我的基本问题保持不变我怎样才能改变尝试将form_for嵌套在彼此中并尝试使用字段?

1 个答案:

答案 0 :(得分:1)

我不建议使用HABTM,因为has_many :through是一种更加灵活和可追溯的做法。那就是说,

<强>视图/用户/ new.html.erb

<%= form_for(@user, url: user_registration_path, html: { id: "signup-form", autocomplete: "off"}) do |f| %>
  <%= f.text_field :name %>
  <%= f.fields_for :accounts do |account_f|  %>
    <%= account_f.text_field :name %>
    ...
  <% end %>
<% end %>

以上内容适用于创建具有帐户的用户,但您需要在新操作上预先填充至少一个帐户直接填写给用户。

<强>控制器/ users_controller.rb

def new
    @user = User.new
    3.times { @user.accounts.build }
    ...
end

private
  def user_params
    params.require(:user).permit(:name, accounts: [:name])
  end

您还需要覆盖模型和控制器层上的有效参数。

<强>模型/ user.rb

accepts_nested_attributes_for :accounts, allow_destroy: true