在Backbone视图中呈现reCAPTCHA v2.0小部件 [英] Rendering reCAPTCHA v2.0 widget within Backbone view
问题描述
这是我的问题,我有一个index.html页面,它显式加载reCAPTCHA脚本:
This is my issue, I have an index.html page which loads the reCAPTCHA script explicitly:
<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
我有一个包含reCAPTCHA容器元素(div)的模板:
I have a template which contains the reCAPTCHA container element (div):
<form id="payment-<%= model.Id %>" class="form" action="" method="POST">
...
<div class="captcha-container"></div> //not being used yet
</form>
我有一个骨干视图,它将模板注入index.thml:
And I have a backbone view which injects the template into 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事件发生在骨干视图初始化之前。我试过从脚本标签中删除async属性,但没有运气。有关如何使其工作的任何想法?
At this point I'm unable to even trigger the callback function (loadCaptcha), my suspicion is that the issue lies in the load order, the index page is loaded and the "onload=loadCaptcha" event occurs before the backbone view is initialized. I've tried removing the "async" property from the script tag, but no luck. Any ideas of how I can get this to work?
推荐答案
我通过直接从呈现它的视图中拉回recaptcha脚本来找出解决方案。希望这有助于将来。
I figured out the solution, by pulling in the recaptcha script directly from the view which renders it. Hope this helps someone in the future.
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() {});
},
这篇关于在Backbone视图中呈现reCAPTCHA v2.0小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!