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

Question

Я столкнулся с проблемой в моем приложении «backbone/underscore». Наш сайт использует recaptcha, и мы хотим разместить этот контент внутри представления. Мы используем подчеркивание для шаблонов. Как бы поместить код 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> 

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

Answer 1

Подчеркивание не мешает вам использовать скриптовые теги, ваши проблемы исходят из объявления шаблона: вы используете 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 (см Can't append <script> element для возможного объяснения).

Ваш лучший выбор - это, вероятно, пройти через 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/

Answer 2

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

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