Шаблоны ReCaptcha и Underscore.js

Я столкнулся с проблемой в моем приложении backbone/underscore. Наш сайт использует recaptcha, и мы хотим поместить этот контент в представление. Мы используем подчеркивание для шаблонов. Как мне поместить код recaptcha в шаблон? Проблема в том, что для рекапчи требуются теги скриптов, и они конфликтуют с тегом скрипта подчеркивания. Например, это будет выглядеть примерно так:

<script type="text/javascript" id="someTemplate">
<div>
    some html here
</div>
<script type="text/javascript"  src="https://www.google.com/recaptcha/api/challengek=YOUR_PUBLIC_KEY"

  

  </script>

любая помощь приветствуется. Спасибо!


recaptcha backbone.js underscore.js
person Scoota P    schedule 10.06.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Подчеркивание не мешает вам использовать теги script, ваши проблемы возникают из-за объявления вашего шаблона: вы используете type="text/javascript", что означает, что ваш браузер пытается интерпретировать ваш шаблон как Javascript, и вы получаете ошибочные результаты.

Пытаться

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <script type="text/javascript"  
            src="https://www.google.com/recaptcha/api/challengek=<%= key %>"
    />
</script>

и демо http://jsfiddle.net/VxjBs/

Как вы заметили в комментариях, Recaptcha пытается загрузить второй скрипт через document.write и терпит неудачу при вставке в DOM (см. element">Невозможно добавить элемент ‹script› для возможного объяснения).

Лучше всего, вероятно, пройти через Recaptcha Ajax API, сгенерировать свой HTML, определить узел и применить к нему Recaptcha.create. Что-то типа

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div class='recaptcha'></div>
</script>

Основанием для представления может быть

var html = _.template(src, {
    text: 'in div'
});

var $el = $('#render').append(html);
$el.find('.recaptcha').each(function(idx, el) {
    Recaptcha.create(
        pubkey,
        el
    );
});

http://jsfiddle.net/nikoshr/VxjBs/2/

person nikoshr    schedule 18.06.2013
comment
так что этот код работает, чтобы не сломать скрипт, но этот скрипт фактически загружает другой скрипт изнутри, используя document.write, но этот document.write не запускается и не загружается в соответствующий файл js. Мысли? Я не хочу публиковать свой ключ из соображений безопасности, но вы должны иметь возможность вставить ключ и увидеть его на скрипке. - person Scoota P; 18.06.2013

arrow_upward
0
arrow_downward

Не уверен, что делает весь скрипт reCAPTCHA, но я предполагаю, что он пытается добавить HTML сразу после себя. В этом случае вам, вероятно, потребуется вручную прикрепить узел скрипта к представлению после его визуализации, а затем установить src узла скрипта на URL-адрес внешнего файла javascript.

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

person idbehold    schedule 17.06.2013

arrow_upward
0
arrow_downward

Предложенное решение слишком сложное. Этого можно легко добиться следующим образом (на самом деле я только что реализовал это в своем проекте).

Обязательно включите файл recaptcha js в элемент head вашей страницы следующим образом:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Добавьте эту функцию в свой javascript где-нибудь.

var render_recaptcha = function(target_id) {
    grecaptcha.render(target_id, {
      'sitekey' : RECAPTCHA_SITE_KEY
    });
};

Затем просто вызовите эту функцию после рендеринга шаблона:

<script type="text/template" id="someTemplate">
    <div><%= text %></div>
    <div id='recaptcha'></div>
</script>

//render template like you usually would
//...
//then render the recaptcha
render_recaptcha('recaptcha');

Вот и все.

person Algorini    schedule 14.11.2020