Как избежать сгенерированного javascript html в Rails? - PullRequest
Новая
       51

Как избежать сгенерированного javascript html в Rails?

0 голосов
/ 16 апреля 2011

На одной стороне моей страницы есть очень простая форма электронной почты. С другой стороны у меня есть предварительный просмотр предлагаемого электронного письма. Например:

enter image description here

Когда пользователь заполняет поля, я хотел бы обновить предварительный просмотр по keyup. Я написал небольшую функцию js, чтобы сделать это: 

var email_previewer = function() {
  var fields = [
    { input: $('input#editor_invitation_to'), preview: $('dt.to') },
    { input: $('#editor_invitation_message'), preview: $('#message') }
  ];

  var perserve_linebreaks = function(text) {
    var html = text.replace(/\r\n\r\n/g, "</p><p>"),
      html = html.replace(/\r\n/g, "<br />"),
      html = html.replace(/\n\n/g, "</p><p>"),
      html = html.replace(/\n/g, "<br />"),
      html = "<p>"+html+"</p>";
    return html;
  };

  var sync_text = function(input, preview) {
    var text = input.val();
    if (input.is('textarea')) {
      text = perserve_linebreaks(text);
    }
    preview.text(text);
  }

  // sync preview on page load
  $.each(fields, function(index, field) {
    sync_text(field.input, field.preview);
  });

  // create keyup events
  $.each(fields, function(index, field) {
    field.input.keyup(function() {
      sync_text(field.input, field.preview);
    });
  });

}();

Все отлично работает, за исключением того, что rails хочет убежать от моего html и сделать его похожим на дерьмо:

enter image description here

Обычно я знаю, что это не проблема: просто добавьте raw или html_safe. Но я не могу сделать это здесь, поскольку разметка динамически создается на основе keyup (или загрузки страницы). Я пропускаю какое-то простое решение? Есть идеи для обхода? Моя единственная идея - загрузить предварительный просмотр в iframe, что кажется странным.

Это смешно расстраивает. Кто-нибудь, пожалуйста, помогите!

1 Ответ

1 голос
/ 16 апреля 2011

Я бы сразу заподозрил preview.text(text) в вашей функции sync_text. Это должно быть создание текстового узла в DOM, и вам нужно установить innerHTML, чтобы было создано несколько узлов.

...