Rails単純なフォームの配列のテキスト入力

Question

私はSimpleFormを使ってフォームを作成しています。

[]、重さを小数点以下の二つの配列を持つモデルを有し、繰り返し[]、私は別々にこれらのアレイ内の各番号の入力フォームを作るためにthisチュートリアルを使用します。

私の問題は、フォームのフィールドをjavascriptで追加/削除する方法がわかりません。このチュートリアルの作者は、「それほど簡単な作業ではないので」コードを記述していませんでした。 どこでどのようにこれらのタスクを実行するためにJavaScriptを配置する必要がありますか？

Answer 1

さてあなたは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 

ようにするためですが、リンクでは、単一の引数、あなたが名前を取り、生成されるリンク上のデータ属性として入力フィールドを設定しないものを。

javascriptの

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

あなたがそのリンクをクリックしたときに、あなたのjavascriptをトリガーにしたいので、ヘルパーが.add_weight_fieldsのクラスとのリンクを生成しています。これが起こると、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にし、少し条件との両方に同じ方法を使用することができます）、およびJSは別のリンクと一緒に発見するためのビューにいくつかの特定のCSSを追加します。