在Rails中添加更多可动态构建的字段

Question

我有一个按钮，它为我的表单添加了部分内容。该部分是用fields_for 额外的表单字段的主要形式是创建Project和fields_for是创造属于项目 一切一RewardsTier模型适用于添加一个额外RewardsTier，但是当我添加多个附加RewardsTier形式它们在html：project[rewards_tiers_attributes][1][min_amount]中都有相同的名称。我想我只需要整数值增加，但不知道如何去做这个

#_rewards_tier_form.html.erb 
<div class="tier-creation-div"> 
    <%= f.fields_for :rewards_tiers do |r| %> 
     <label for="min_amount">Tier Amount</label> 
     <%= r.text_field :min_amount, data: {name: 'min_amount'}, class: "w-input", id: "min_amount", maxlength: "256", placeholder: "$1", required: "required", autofocus: 'true' %> 

     <label for="body">Tier Body</label> 
     <%= r.text_area :body, data: {name: 'body'}, class: "w-input", id: "body", maxlength: "5000", placeholder: "We email you the show notes and links...", required: "required", autofocus: 'true' %> 
    <% end %> 
</div> 

。

#new.html.erb 
<%= form_for(@project, data: {name: "Email Form 2"}, html: {class: 'w-clearfix', id: "email-form-2", name: "email-form-2"}, url: '/projects/create', method: 'post') do |f| %> 
    ... 
    <div class="rewards-creation-div" id="rewards-creation-div"> 
    <h4>Rewards</h4> 
    <%= render 'rewards_tier_form', f: f %> 
    </div> 
    <div> 
    <a class="add-tier-button w-button" id="add-tier-button" href="#">+ Add tier</a> 
    <script type="text/javascript"> 
     $('#add-tier-button').click(function() { 
     $("#rewards-creation-div").append('<%= escape_javascript("#{render 'rewards_tier_form', f: f}").html_safe %>'); 
     }); 
    </script> 
    </div> 
    ... 
    <input class="submit-project-button w-button" data-wait="Please wait..." type="submit" value="Create Project"><a class="cancel-button w-button" href="#">Cancel</a> 
<% end %> 

Answer 1

这不能在Rails的完成，因为它是所有渲染客户端。我通过使用Javascript来解决这个问题。我的JS并不好，所以可能有更清晰的写法，但它可行。

#_rewards_tier_form.html.erb 
<div class="tier-creation-div"> 
    <script> 
     document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<label for="min_amount">Tier Amount</label>'); 
     document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<input data-name="min_amount" class="w-input" id="min_amount" maxlength="256" placeholder="$1" required="required" autofocus="autofocus" size="256" type="text" name="project[rewards_tiers_attributes]['+rewards_tier_index+'][min_amount]">'); 
     document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend','<label for="body">Tier Body</label>'); 
     document.getElementById("rewards-creation-div").lastElementChild.insertAdjacentHTML('beforeend', '<textarea data-name="body" class="w-input" id="body" maxlength="5000" placeholder="We email you the show notes and links..." required="required" autofocus="autofocus" name="project[rewards_tiers_attributes]['+rewards_tier_index+'][body]"></textarea>'); 
    </script> 
</div> 

。

#new.html.erb 
<div class="rewards-creation-div" id="rewards-creation-div"> 
    <h4>Rewards</h4> 
    <script type="text/javascript"> 
     var rewards_tier_index = 0; 
    </script> 
    <%= render 'rewards_tier_form', f: f %> 
</div> 
<div> 
    <a class="add-tier-button w-button" id="add-tier-button" href="#">+ Add tier</a> 
    <script type="text/javascript"> 
     $('#add-tier-button').click(function() { 
      rewards_tier_index = rewards_tier_index + 1; 
      $("#rewards-creation-div").append('<%= escape_javascript("#{render 'rewards_tier_form', f: f, child_index: @indx}").html_safe %>'); 
     }); 
    </script> 
</div>