ReCaptcha 和 Underscore.js 模板答案

【问题标题】：ReCaptcha & Underscore.js TemplatesReCaptcha 和 Underscore.js 模板
【发布时间】：2013-06-10 15:44:38
【问题描述】：

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

感谢任何帮助。谢谢！

【问题讨论】：

标签： backbone.js underscore.js recaptcha

【解决方案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/

正如您在 cmets 中所述，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/

【讨论】：

这样代码就不会破坏脚本，但该脚本实际上使用 document.write 从内部加载另一个脚本，但 document.write 没有触发并加载到适当的 js 文件中。想法？出于安全原因，我不想发布我的密钥，但您应该能够将密钥放入并在小提琴中看到它

【解决方案2】：

不确定所有 reCAPTCHA 脚本的作用，但我假设它会尝试在其自身之后附加 HTML。如果是这种情况，那么您可能需要在渲染视图后手动将脚本节点附加到视图，然后将脚本节点的 src 设置为外部 javascript 文件的 URL。

您不能将脚本标签放在下划线模板中，因为浏览器只会解析最外层的脚本标签（您的模板）。

【讨论】：

【解决方案3】：

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

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

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

就是这样。

【讨论】：