Динамически вставлять рубин сгенерированный HTML

Question

У меня есть форма, в которой пользователь может выбрать создание дополнительных областей ввода (чтобы предоставить дополнительную информацию). У меня есть ссылка, на которую пользователь нажмет, а затем будут добавлены дополнительные входные данные. Я хотел бы использовать рельсы, помогающие мне, чтобы мне не пришлось писать сам html. Я пробовал вставлять хелпер формы непосредственно в coffeescript и сохранять выводимый html в тег данных по ссылке, но я не могу заставить coffeescript выполнить код 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»> Добавить точку»

Я получил данные атрибуты идеи из этого screencast

Answer 1

Простым решением для меня было заменить двойные кавычки в моем сгенерированном 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 

Answer 2

Вы не можете выполнить Ruby-код из Javascript. Когда запрашивается страница, весь внедренный рубин оценивается, и результаты получаются. Проблема, которую я вижу из пасты, заключается в том, что ваш блок ярлыков находится в правильном атрибуте данных, но он не экранирован.

Что вам нужно сделать, так это избежать кавычек сгенерированного 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(/((?:<)|(?:>)|(?:"))/g, function($1) { 
    switch($1) { 
     case ">": 
     return ">"; 
     case "<": 
     return "<"; 
     case "&quot;": 
     return '"'; 
    } 
    }); 
} 

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

я не сомневаюсь, что существует лучшее решение, и с момента публикации этого ответа я не тестировал это на работу (теоретически это должно быть). В идеале вы должны просто генерировать элементы с jQuery в Javascript и не зависеть от этого метода для этого - да, это дублированный код, дублированный между рубином и кофе.