24

Ryan Bates が、Javascript を使用して親オブジェクト フォーム内でネストされたオブジェクトを動的に追加または削除する方法を説明している、素晴らしい複雑なフォームの railscast を見てきました。

Haml Formtastic で動作するようにこれらのメソッドをどのように変更する必要があるかについて、何かアイデアを持っている人はいますか?

コンテキストを追加するために、現在直面している問題の簡略版を次に示します。

# Teacher フォーム (サブジェクト フォームがネストされている) [私のアプリケーションから]

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city
    = render 'subject_fields', :form => form 
    = link_to_add_fields "Add Subject", form, :subjects

# 個人件名フォームの一部 [私の申請書から]

- form.fields_for :subjects do |ff| 
  #subject_field
    = ff.input :name
    = ff.input :exam
    = ff.input :level
    = ff.hidden_field :_destroy
    = link_to_remove_fields "Remove Subject", ff

# アプリケーション ヘルパー (Railscasts からそのまま)

  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 + "_fields", :f => builder)
    end
    link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}  \")"))
  end

#Application.js (Railscasts からそのまま)

  function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
  }

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

実装の問題は、JavaScript メソッドにあるようです。Formtastic フォームの DOM ツリーは、通常の Rails フォームとは大きく異なります。

この質問がオンラインで何度か出されているのを見たことがありますが、まだ答えが出ていません。

ジャック

4

4 に答える 4

27

あなたは正しい軌道に乗っています：

...Formtastic フォームの DOM ツリーは、通常の Rails フォームとは大きく異なります。

Ryan の例を formtastic に適合させるには、ヘルパーが、入力をリスト形式で出力するヘルパーにsemantic_fields_for似ていることを思い出してください。semantic_form_for

Railscast のコードにできるだけ近づけるために、次のことを行う必要があります。

  • ネストされたフィールドのコレクションをラッパーで囲みます ( subjectsCSS ID で div を使用します)。
  • ネストされたフィールドを ul/ol ラッパーで囲みます ( nested-fieldsCSS クラスを適用しました)。

ファイルは次のようになります。

Teacher フォーム (ネストされた件名フィールドを含む):

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city

    %h2 Subjects
    #subjects
      - form.semantic_fields_for :subjects do |builder|
        = render :partial => "subject_fields", :locals => { :f => builder }
      .links
        = link_to_add_fields "Add Subject", form, :subjects

サブジェクト フィールドの一部 (ネストされたサブジェクトの場合):

%ul.nested-fields
  = f.input :name
  = f.input :exam
  = f.input :level
  = link_to_remove_fields "Remove Subject", f

アプリケーションヘルパー:

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 + "_fields", :f => builder)
  end
  link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")"))
end

アプリケーション.js:

function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".nested-fields").hide();
}

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

次の宝石を使用：

  • フォームタスティック (0.9.10)
  • ハムル (3.0.2)
  • ガーキン (1.0.26)
  • レール (2.3.5)
于 2010-08-06T21:58:37.520 に答える
3

jQuery の application.js:

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).parent(".nested-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));
}
于 2010-09-29T03:27:11.803 に答える
1

私は何年もの間、オンとオフで頭を悩ませてきましたが、今日、私が誇りに思っていることを思いつきました-エレガントで目立たず、2行または3行（非常に長い）コードのみで実行できます.

ParentFoo has_many NestedBars には、適切な accept_nested_pa​​rameters とそれらすべての機能があります。:child_index を使用して後で置換できる文字列を設定し、nested_bar の一連のフィールドをリンクの data-add-nested 属性にレンダリングします。その文字列を 2 番目のパラメーター data-add-nested-replace に渡します。

parent_foos/_form.html.haml

- semantic_form_for @parent_foo do |f|
  -# render existing records
  - f.semantic_fields_for :nested_bars do |i|
    = render 'nested_bar_fields', :f => i

  # magic!
  - reuse_fields = f.semantic_fields_for :nested_bars, @parent_foo.nested_bars.build, :child_index => 'new_nested_bar_fields' do |n| render('nested_bar_fields', :f => n) end
  = link_to 'Add nested bar', '#', 'data-add-nested' => reuse_fields, 'data-add-nested-replace' => 'new_nested_bar_fields'

ネストされたフィールドのパーシャルは派手なものではありません

parent_foos/_nested_bar_fields.html.haml

- f.inputs do
  = f.input :name
  = f.input :_delete, :as => :boolean

jQuery では、要素のクリックを data-add-nested フィールド (ここでは live() を使用したので、ajax で読み込まれたフォームが機能します) にバインドして、フィールドを DOM に挿入し、文字列を新しい ID に置き換えます。ここでは、新しいフィールドをリンクの before() に挿入するという単純なことを行っていますが、リンクに add-nested-replace-target 属性を指定して、新しいフィールドを DOM のどこに配置するかを指定することもできます。

アプリケーション.js

$('a[data-add-nested]').live('click', function(){
  var regexp = new RegExp($(this).data('add-nested-replace'), "g")
  $($(this).data('add-nested').replace(regexp, (new Date).getTime())).insertBefore($(this))
})

もちろん、これをヘルパーに入れることもできます。ここではビューで直接提示しているので、メタプログラミングをいじることなく原則が明確になります。名前の衝突が心配な場合は、そのヘルパーで一意の ID を生成し、nested-replace に渡すことができます。

削除の動作を理解することは、読者の課題として残されています。

(Rails 2 で表示されているのは、私が現在取り組んでいるサイトであるためです。Rails 3 でもほぼ同じです)

于 2011-01-23T01:36:01.180 に答える
1

Rails 3 では、ヘルパーで h() 関数を使用する必要はありません。省略すればうまくいくはずです。

于 2010-10-25T18:16:17.233 に答える