1

これは骨の折れる質問の1つになると思います。しかし、それは私に頭をかいてしまいます。

オブジェクトIDに基づいて一意のIDを持つ一連のdivを作成するパーシャルがあります。

<% @contact.email_addresses.each do |email_address| %>
    <div id=<%= "email_address_"+email_address.id.to_s %>>
    .
    . do stuff
    .
    </div>
<% end %>

これにより、次のような一連のdivが得られます。

<div id="email_address_13">
  foo@bar.com
  <div class="form_icon" title="edit email address" rel="tooltip" ,="">
    <a data-remote="true" href="/email_addresses/13/edit?contact_id=2">
      <img height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil">
    </a>
  </div>
  <div class="form_icon" title="delete email address" rel="tooltip" ,="">
    <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2">
      <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove">
    </a>
  </div>
</div>

ご覧のとおり、各divには編集とキャンセルのボタンがあります。ここまでは順調ですね。

ユーザーが編集ボタンをクリックしたときに、divのコンテンツを編集可能なフォームに置き換えたいと思います。したがって、edit.js.erbファイルでは、次のようにします。

$('#email_address_13').html("<%= escape_javascript(render 'email_address_form')%>")

だから、ここに質問があります。edit.js.erbファイルで、どのように連結email_address_して、email_address.id次のようなセレクターを作成するの'#email_address_13'ですか？

ハードコーディングする'#email_addres_13'と、すべてが美しく機能します。edit.js.erbしたがって、これは、ファイル内にdivセレクターを動的に生成する方法に関する質問です。

ありがとうございました！

4

3 に答える 3

3

アイコンimgにIDを追加し、JavaScriptレベルで連結します。HTMLは次のようになります（編集アイコンにIDとクラスを追加しました）：

<div id="email_address_13">
    foo@bar.com
    <div class="form_icon" title="edit email address" rel="tooltip" ,="">
        <a data-remote="true" href="/email_addresses/13/edit?contact_id=2">
           <img id="13" class="edit" height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil">
        </a>
    </div>
    <div class="form_icon" title="delete email address" rel="tooltip" ,="">
        <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2">
            <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove">
        </a>
    </div>
</div>

これで、編集js関数は次のようになります。

$(".edit").click( function() {
    var id = $(this).id;
    $('#email_address_' + id).html("<%= escape_javascript(render 'email_address_form')%>")
});
于 2012-05-08T20:13:47.317 に答える
2

了解しました...edit.js.erbの1行のコードですべてが実行されます。

連結に関しては、トリックは次のとおりです。

$('#email_address_<%= @email_address.id.to_s %>')

これは.erbファイルにあるので、 （途中で整数から文字列に変換する）<%= @email_address.id.to_s %>を取得するために使用できます。idこれは$（）の内部に入る必要があります。そうしないと、.html is not a functionエラーがスローされます。したがって、全体の呼び出しは次のとおりです。

$($('#email_address_<%= @email_address.id.to_s %>')).html("<%= escape_javascript(render 'email_address_form')%>");

ボタンはフォームの一部であるため、クリックイベントをバインドする必要はありません。定義上、ボタンがクリックされると、コントローラーメソッド（edit）と関連するJavaScriptファイル（edit.js.erb）がトリガーされます。

助けてくれてありがとう！

于 2012-05-09T07:02:14.227 に答える
1

divにクラスを追加できます

<% @contact.email_addresses.each do |email_address| %>
    <div class='your-class' id=<%= "email_address_"+email_address.id.to_s %>>
    .
    . do stuff
    .
    </div>
<% end %>

そして、edit.jsではIDセレクターの代わりにクラスセレクターを使用します

$('.your-class').html("<%= escape_javascript(render 'email_address_form')%>")

`

于 2012-05-08T19:38:34.147 に答える