Rails簡單表單數組文本輸入

Question

我正在使用SimpleForm構建表單。

我有一個帶有兩個小數，weights []和repeats []兩個數組的模型，因此我使用了本教程為這些數組中的每個數字分別輸入一個輸入形式。

我的問題是我不知道如何使用javascript從表單中添加/刪除字段。 本教程的作者沒有放置任何代碼“因為這是一件微不足道的任務”。 我需要在哪里以及如何放置JavaScript來執行這些任務？

Answer 1

與添加嵌套記錄不同，在嵌套記錄中您需要查詢rails來創建new關聯對象，這實際上只是使用javascript添加另一個輸入。 我可能會使用幫助，因為它將使您的視圖更清晰。 因此，您必須創建一個構造輸入字段的幫助程序，在視圖中調用該幫助程序，並使用幾行JavaScript將數據從該幫助程序放到所需的頁面上。

幫手

module ApplicationHelper
    def link_to_add_weights(name)
    link_to name, '#', class: "add_weight_fields", :"data-field" => "<input class='text optional' type='text'  name='yourmodelname[weights][]' id='yourmodelname_'>"
  end
end

因此，此操作只需一個參數，即鏈接中所需的名稱，然后將輸入字段設置為要生成的鏈接上的data屬性。

JavaScript

$(document).ready(function(){
  $(".add_weight_fields").click(function(){
    $("#weights").append($(this).data("field"));
  });
});

該幫助程序正在生成一個具有.add_weight_fields類的鏈接，因此您希望在單擊該鏈接時觸發JavaScript。 一旦發生這種情況，您只想從data-field屬性附加數據，在此示例中，我使用的是權重的css idd。

風景

<%= simple_form_for(@yourmodelname) do |f| %>
  <%= f.input :repetitions, as: :array %>
  <div id="weights">
    <%= f.input :weights, as: :array %>
    <%= link_to_add_weights "Add New Weight" %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

然后，您將進行相同的重復。 創建一個新的幫助器，創建一個新的js方法（或者您可以將其設置為DRY，並在不加條件的情況下對兩者使用相同的方法），然后向該視圖中添加一些可識別的css，以便js可以找到另一個鏈接。