骨幹視圖中繪製的reCAPTCHA 2.0插件

這是我的問題，我有它加載明確的驗證碼腳本的index.html頁面：骨幹視圖中繪製的reCAPTCHA 2.0插件

<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」事件。我嘗試從腳本標記中刪除「異步」屬性，但沒有運氣。任何想法，我怎麼能得到這個工作？

來源

2015-12-10 paulp

我會把你的捕獲腳本放在骨幹視圖中。然後把它放在主視圖的渲染中。就像它是模塊化的，你有一個主視圖和一個包含驗證碼的子視圖，這個驗證碼在主視圖被渲染時被加載。

來源

2015-12-11 13:29:43

我想出瞭解決方案，直接從呈現它的視圖中提取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() {}); 
},

來源

2015-12-30 16:33:48 paulp

骨幹視圖中繪製的reCAPTCHA 2.0插件

回答

相關問題