在ruby on Rails上使用javascript注入Ruby

Question

所以，我想做的事情，是有一个按钮，将更多的字段添加到表单中。假设我有这个：

<div class="row">
      <div class="form-group string required">
        <div class="cep_filter">
          <div class="col-md-3 traffic-columns">
            <%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>
          </div>
          <div class="col-md-1">
            <%= f.input :operator, collection: @operator, label: "Op (*)" %>
          </div>
          <div class="col-md-2">
            <%= f.input :filter, label: "Value (*)",input_html: {type: "text" } %>
          </div>
        </div>
        <div class="col-md-3">
          <%= f.input :window, collection: @window, label: "Window Type", input_html: {type: "text"} %>
        </div>
        <div class="col-md-3">
          <%= f.input :window2, label: "Window Value", input_html: {type: "text"} %>
        </div>
      </div>
    </div>

然后，假设我有一个这样的按钮：

<%= link_to content_tag(:i, nil, class: "fa fa-plus"),
             '', style: 'color: green', class: "btn btn-small add-new-condition", 'data-backdrop' => "static" %>

我想要做的是，当你点击那个按钮的时候，你调用这个：

$(document).on("click", ".add-new-condition", function(e) {
  var html =
  "<div class='col-md-3 traffic-columns'> \
    <%= f.input :new_param, collection: @traffic_columns, label: 'Monitor (*)' %>\
  </div>
  "
});

然后将该html附加到某个div元素。据我所知，从javascript注入ruby是不可能的。它涉及到一个是服务器端，另一个是客户端。我已经试过了，ruby代码显示为一个字符串。我可以使用纯html来构建这些新字段，但这里重要的是，我想添加新字段，稍后我可以使用params[:new_param]在控制器中访问这些新字段。

有没有办法只用html来添加新字段，这样我以后就可以访问rails控制器中输入的值了？谢谢。

Answer 1

看一看Rails指南，特别是关于如何从rails服务器响应一些JavaScript，然后由客户端进行评估("rails-ujs")的部分。

这为您提供了所需的所有功能(顺便说一句，它可以取代现在人们使用整个JS框架做的很多事情)。

您所需要的就是指向一个可以respond_to ... format.js的控制器操作所处理的路径的link_to ... remote: true。然后，您将一个something.js.erb文件放入app/views文件夹中的正确位置，Rails将为您完成剩下的工作。

请仔细阅读完整的指南，了解完整的情况，如果您仍有问题，请在下面发表评论。我很乐意扩展我的答案！

Answer 2

你几乎已经成功了！

您是否将文字字符串<%= f.input :new_param, collection: @traffic_columns, label: 'Monitor (*)' %>注入到您的div中，而您想要的字符串看起来更像<input type="text" />

这是因为ruby服务器将把ERB代码转换成HTML。

看起来你已经用<%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>在你的ERB中创建了一个输入域。给包装div一个id，这样表单就会把它作为第一个字段：

<div class="col-md-3 traffic-columns" id="duplicate_and_inject_this">
            <%= f.input :condition, collection: @traffic_columns, label: "Monitor (*)" %>
          </div>

然后，在单击事件上，克隆该div并将其附加到您想要的任何位置。

$(".add-new-condition").click(function (){
  var new_input = $("#duplicate_and_inject_this").clone();
  new_input.appendTo( "#new_inputs_wrapper" );
})

通过这种方式，ruby会为您呈现输入字段，而JS会在您单击按钮时多次复制该输入字段。

如果您想从零个输入实例开始，只需像其他人提到的那样隐藏它，然后在克隆它之后使其可见。

您可以通过其他方式更改克隆，以更新新的name属性或在将其附加到表单之前更改它的值。

如果您要使用link_to remote，则必须在每次添加字段时进行服务器调用。克隆HTML并将其注入JS将会快得多。