1

我有一个表单，用户可以选择创建更多输入区域（以提供更多信息）。我有一个用户将单击的链接，然后将创建额外的表单输入。我想使用 rails 表单助手，这样我就不必自己编写 html。我尝试将表单助手直接插入到 coffeescript 中，并将输出的 html 保存到链接上的数据标签中，但是我无法让咖啡脚本执行 ruby​​ 代码，并且我遇到了数据属性的转义问题。

这是表格：

= 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">Add Point"

我从这个截屏视频中得到了数据属性的想法

4

2 回答 2

0

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

您需要做的是将生成的 HTML 中的引号转义到该字段中，然后通过 Javascript 将它们转义。您可以html_escape在这里使用：(data: { fields: h(label_tags) }是h别名，html_escape或者您可以自己手动执行此操作。

def escape(str)
  str.gsub(/</, "&lt;").gsub(/>/, "&gt;").gsub(/"/, "&quot;")
end

# later in the view for the form
data: { fields: escape(label_tags) }

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

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);
});

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

于 2013-05-08T17:13:06.043 回答
0

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

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

此外，必须在辅助方法中使用captureand ：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
于 2013-05-09T14:52:12.523 回答