更新表单实时预览的输入值（Ruby on Rails）答案

【问题标题】：Update input values for form live preview (Ruby on Rails)更新表单实时预览的输入值（Ruby on Rails）
【发布时间】：2014-01-05 13:00:07
【问题描述】：

我有一个包含多个输入的表单，为此我在 Ruby on Rails 应用程序中进行了实时预览。实时预览工作正常，直到使用现有记录预览表单。

如果我的对象没有创建，我会看到类似这样的内容（注意没有“值”属性）

<input class="deal_title" id="deal_title" name="deal[title]" type="text">

如果我填写表单并将其发送到服务器，输入“值”的属性将被分配用户输入的值，所以如果我打开表单源，我会看到：

<input class="deal_title" id="deal_title" name="deal[title]" type="text" value="New offer">

我有一个绑定实时预览的脚本：

  $("#new_deal input").keyup ->
    css_klass = $(this).attr("class")
    $(this).attr('value', $(this).val())
    inpt = $(this).val()
    $("." + css_klass + "_preview").html inpt

如果我在 JsFiddle 中重现相同的内容，它可以正常工作：

JsFiddle without "value"

JsFiddle with "value"

但是在我的 Rails 应用程序中，这只适用于第一种情况（如果没有设置值）。在第二种情况下，什么都没有发生，价值保持不变。我直接从视图中复制了我的应用程序的输入。我使用带有 turbolinks 的 Rails 4。

【问题讨论】：

标签： jquery forms dom ruby-on-rails-4 turbolinks

【解决方案1】：

我自己找到了答案！

这是因为 rails 会根据操作将自定义 ID 应用于表单。如果它是“New”动作，那么 ID 将是“new_object”。如果是“编辑”动作，那么类就是“edit_object”。

我应用了自定义类，例如：

<%= form_for(@deal, html: { "data-abide" => '', id: "deal_form"}, builder: SmartLabelFormBuilder) do |f| %>
...
<% end %>

和

$("#deal_form input").keyup ->
    css_klass = $(this).attr("class")
    $(this).attr('value', $(this).val())
    inpt = $(this).val()
    $("." + css_klass + "_preview").html inpt

而且它有效。

【讨论】：