Question

我有一个表单，用户可以选择创建更多输入区域（以提供更多信息）。我有一个用户将点击的链接，然后将创建额外的表单输入。我想使用rails表单助手，这样我就不必自己编写html了。我已经尝试将表单助手直接插入到coffeescript中，并将输出的html保存到链接上的数据标记中，但是我无法获得执行ruby代码的coffeescript，而且我正在逃避数据属性的问题。 / p>

以下是表格：

= simple_form_for([@site, @zone]) do |f|
  = f.error_notification

  .form-inputs
    = f.input :site_id

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = link_to "Add Point", "#", id: "add_point", data: { fields: label_tags }

  .form-actions
    = f.button :submit

当用户点击“添加点”链接时，我想添加另一个块：

= label_tag "X"
= text_field_tag 'x_coords[]'

= label_tag "Y"
= text_field_tag 'y_coords[]'

label_tags位于application_helper.rb：

def label_tags
  label_tag "Z"
end

问题是“添加点”链接的输出是：

<a href="#" data-fields="<label for=" z"="">Z" id="add_point"&gt;Add Point</a>

和引号导致链接出现文字：“Z”id =“add_point”＆gt;添加点“

我从这个screencast

获得了数据属性的想法

Answer 1

您无法从Javascript执行Ruby代码。当请求页面时，将评估所有嵌入的ruby并获得结果。我可以看到您粘贴的问题是您的标签块位于正确的数据属性中，但它没有被转义。

你需要做的是逃避生成的HTML进入该字段的引号然后通过Javascript取消它们。您可以在html_escape使用data: { fields: h(label_tags) }：h（html_escape是def escape(str) str.gsub(/</, "<").gsub(/>/, ">").gsub(/"/, """) end # later in the view for the form data: { fields: escape(label_tags) }的别名，或者您可以自己手动执行此操作。

function unescape(str) {
  return str.replace(/((?:&lt;)|(?:&gt;)|(?:&quot;))/g, function($1) { 
    switch($1) {
      case "&gt;":
        return ">";
      case "&lt;":
        return "<";
      case "&quot;":
        return '"';
    }
  });
}

$("a").on("click", function() {
  var html = unescape(this.data("fields"));
  $(".the-place-to-put-it").html(html);
});

然后你的CoffeeScript会点击处理程序：

{{1}}

我不怀疑存在更好的解决方案，并且在发布此答案时我没有对此进行测试（理论上应该如此）。理想情况下，您应该在Javascript中使用jQuery生成元素，而不是依赖于此方法来执行此操作 - 是的，它是在ruby和Coffee之间重复的重复代码。

Answer 2

对我来说，简单的解决方案是用单引号替换生成的HTML中的双引号。在代码中：

= link_to "Add Point", "#", id: "add_point", data: { fields: label_tags.gsub("\"", "'") }

此外，必须在帮助程序方法中使用capture和concat：

module ApplicationHelper
  def label_tags
    capture do
      concat label_tag "X"
      concat text_field_tag 'x_coords[]'

      concat label_tag "Y"
      concat text_field_tag 'y_coords[]'
    end
  end
end

动态插入ruby生成的HTML

2 个答案: