Variable scope in Backbone.js

Question

I have web application in Backbone.js that is using Stripe payment system.

This is part of the model code:

App.Models.Payment = Backbone.Model.extend({

defaults: {
    id:null
},

url: function() {
    // code
},

initialize:function(){      
    this.id='';
    this.saveClicked= false;
    this.saveDetailsChecked= true;
}

this model is used in this view:

App.Views.BillingView = Backbone.View.extend({

el: '#billing-fields',

events: {
    'click #billing-footer-buttons .navigation .confirm-btn': 'saveCardClicked'
},

initialize:function(models, options) {
    Stripe.setPublishableKey('**********************');
    var self = this;
},

saveCardClicked:function(e) {
    e.preventDefault(); 
    if (this.model.saveClicked) return false;
    this.model.saveClicked = true;
    var $form = $('#payment-form');
    Stripe.createToken($form, this.stripeResponseHandler);
},

cancelClicked:function() {
    vent.trigger('showScreen', 'subscribe-container');
},

stripeResponseHandler:function(status, response) {
    var $form = $('#payment-form');
    self.saveDetailsChecked = document.getElementById("billing-checkbox").checked;
    var atr1 = document.getElementById("billing-card-number").value;
    var atr2 = self.model.savedCard;
    if(document.getElementById("billing-card-number").value == self.model.savedCard){
        self.model.set('use_saved_card','1');
        vent.trigger('doPayment');
    }else{
        if (response.error) {
            // code
        } else {
            // code
        }
    }
    self.saveClicked = false;
}
});

In the saveCardClicked function I am able to access the variables from the model like the saveClicked variable.

But in the stripeResponseHandler I am not able to access the 'saveClicked' variable from the model, in this function this refers to window, and self variable that is defined in the initialize function cannot be accessed also.

stripeResponseHandler is called from the Stripe API.

Is there any way that I can access the savedCard variable in the stripeResponseHandler function or I should use global variable?

Answer 1

试着用这个： -

Stripe.createToken($form, this.stripeResponseHandler.bind(this));

Answer 2

Sure, you can use bind .

Bind works by binding parameters to a certain function call, and will return a function that, when invoked, will be passed the parameter that you declared when calling bind (plus, actually, any other expected parameter that you didn't declared). There is a special parameter to pass to bind . The first one, and it is the this object that will be used when the function is called.

So, what you would do is to call

Stripe.createToken($form, this.stripeResponseHandler.bind(this));

here you are declaring a callback (stripeResponseHandler) that when invoked, will have this as this object (I know the phrase is convoluted, but I think you got it).

Also, keep in mind that your line

var self = this;

is not working as well as it is scoped to the initialize function, thus not visible outside of it.