I am running into an issue in my backbone/underscore application. Our site uses recaptcha and we want to put that content inside a view. We are using underscore for templates. How would i put the recaptcha code inside a template? THe problem is there are scripts tags required for recaptcha and it collides with the underscore script tag. For example it would look something like this:
<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>
any help is appreciated. Thanks!
Underscore does not prevent you from using script tags, your problems come from your template declaration : you use type="text/javascript" which means your browser tries to interpret your template as Javascript and you get erratic results.
Try
<script type="text/template" id="someTemplate">
<div><%= text %></div>
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challengek=<%= key %>"
/>
</script>
and a demo http://jsfiddle.net/VxjBs/
As you noted in the comments, Recaptcha tries to loads a second script via document.write and fails when inserted in the DOM (see Can't append <script> element for a probable explanation).
Your best bet is probably to go through Recaptcha Ajax API, generate your HTML, identify a node and apply Recaptcha.create on it. Something like
<script type="text/template" id="someTemplate">
<div><%= text %></div>
<div class='recaptcha'></div>
</script>
The basis for a view could be
var html = _.template(src, {
text: 'in div'
});
var $el = $('#render').append(html);
$el.find('.recaptcha').each(function(idx, el) {
Recaptcha.create(
pubkey,
el
);
});