Backbone.js 雷帕查；下划线.js模板

我的主干/下划线应用程序遇到问题。我们的网站使用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"

这里有一些html
不确定所有的reCAPTCHA脚本都做了什么，但我假设它会在自己之后添加HTML。如果是这种情况，则可能需要在渲染后手动将脚本节点附加到视图，然后将脚本节点的
src
设置为外部javascript文件的URL

您不能将脚本标记放在下划线模板内，因为浏览器将只解析最外层的脚本标记（您的模板）。
下划线不会阻止您使用脚本标记，您的问题来自模板声明：您使用的是
type=“text/javascript”
这意味着您的浏览器试图将模板解释为Javascript，结果不稳定

试一试



还有一个演示

正如您在注释中所指出的，Recaptcha尝试通过
document.write加载第二个脚本，但在插入DOM时失败（有关可能的解释，请参阅）

您的最佳选择可能是浏览、生成HTML、识别节点并在其上应用
Recaptcha.create
。差不多



观点的基础可以是

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

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

建议的解决方案太复杂了。
这可以很容易地实现，如下所示（事实上，我刚刚在我的项目中实现了它）

确保在页面的“head”元素中包含recaptcha js文件，如下所示：

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

然后，只需在渲染模板后调用此函数：

<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');


//像通常一样渲染模板
//...
//然后渲染recaptcha
呈现_recaptcha（“recaptcha”）；

就是这样。
这样代码就不会破坏脚本，但该脚本实际上使用document.write从内部加载了另一个脚本，但document.write没有启动并加载到相应的js文件中。思想？出于安全原因，我不想发布我的钥匙，但你应该能够把钥匙放进去，并在小提琴上看到它
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');