在 Backbone 视图中呈现 reCAPTCHA v2.0 小部件答案

【问题标题】：Rendering reCAPTCHA v2.0 widget within Backbone view在 Backbone 视图中呈现 reCAPTCHA v2.0 小部件
【发布时间】：2015-12-10 21:41:02
【问题描述】：

这是我的问题，我有一个 index.html 页面，它显式加载了 reCAPTCHA 脚本：

<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>

我有一个包含 reCAPTCHA 容器元素 (div) 的模板：

<form id="payment-<%= model.Id %>" class="form" action="" method="POST">
    ...
    <div class="captcha-container"></div> //not being used yet
</form>

我有一个主干视图，它将模板注入 index.thml：

'use strict';
var Backbone = require('Backbone');

var Validation = require('backbone-validation');
Backbone.Validation = Validation;
Backbone.$ = $;

module.exports = BaseView.extend({
    events: {},
    formView: null,
    initialize: function (options) {
       var loadCaptcha = function() {
            window.alert('captcha is ready');
        };
    },
    render: function () {
       // renders view using my form template
    }
});

此时我什至无法触发回调函数（loadCaptcha），我怀疑问题在于加载顺序，加载索引页面并且“onload = loadCaptcha”事件发生在主干视图之前被初始化。我试过从脚本标签中删除“异步”属性，但没有运气。关于如何让它发挥作用的任何想法？

【问题讨论】：

标签： javascript backbone.js recaptcha

【解决方案1】：

我想出了解决方案，方法是直接从呈现它的视图中拉入 recaptcha 脚本。希望这对将来的某人有所帮助。

loadCaptcha: function() {
    var self = this;
    var getRecaptchaResponse = function(response) {
      self.captchaResponse = response;
    };

    var renderCaptcha = function() {
      self.captchaWidgetId = grecaptcha.render('recaptcha-container-' + self.model.get('Id'), {
          sitekey : service.settings.recaptchaSiteKey,
          callback: getRecaptchaResponse
      });
    };

    window.renderCaptcha = renderCaptcha;

    $.getScript('https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit', function() {});
},

【讨论】：

【解决方案2】：

我会将您的验证脚本放在主干视图中。然后把它放在你的主视图的渲染中。就像它是模块化的一样，您有一个主视图和一个包含验证码的子视图，该验证码在渲染主视图时加载。

【讨论】：