Javascript 主干视图：函数未定义

我想建立一个简单的主干应用程序，用于通过Stripe存取资金。由于许多功能都很常见，我将其放在条带视图中，并从中扩展存款和取款视图，如下所示：

var App = {
    Models: {},
    Collections: {},
    Views: {},
    Router: {}
}

App.Views.Home = Backbone.View.extend({
    el: $('#main-content'),

    template: Handlebars.compile($('#home-template').html()),

    render: function() {
        this.$el.html(this.template())
        return this
    },

    events: {
        'click #deposit-button': 'navigateToDeposit',
        'click #withdraw-button': 'navigateToWithdraw'
    },

    navigateToDeposit: function(e) {
        Backbone.history.navigate('/deposit', true)
    },

    navigateToWithdraw: function(e) {
        Backbone.history.navigate('/withdraw', true)
    }
})

App.Views.Stripe = Backbone.View.extend({
    el: $('#main-content'),

    initialize: function() {
        Stripe.setPublishableKey('pk_test_0QvQdPBkXAjB4EBsT4mf226x')
    },

    render: function() {
        this.$el.html(this.template())
        return this
    },

    events: {
        'click #submit': 'submitForm'
    },

    submitForm: function(e) {
        e.preventDefault()
        $('#submit').prop('disabled', true)
        var that = this
        Stripe.card.createToken($('#form'), that.stripeResponseHandler)
    },

    stripeResponseHandler: function(status, response) {
        var $form = $('#form')

        if(response.error) {
            $form.find('.payment-errors').text(response.error.message)
            $('submit').prop('disabled', false)
        } else {
            console.log(this)
            var form_data = this.getFormData(response.id),
                that = this
            $.post(that.transaction_endpoint, form_data, function(data, textStatus, jqXHR) {
                Backbone.history.navigate('/home', true)
            })
        }
    }
})

App.Views.Deposit = App.Views.Stripe.extend({

    template: Handlebars.compile($('#deposit-template').html()),

    getFormData: function(token) {
        return {
            amount: $('#form input[name=amount]').val(),
            token: token
        }
    },

    transaction_endpoint: 'handledeposit'
})

App.Views.Withdraw = App.Views.Stripe.extend({

    template: Handlebars.compile($('#withdraw-template').html()),

    getFormData: function(token) {
        return {
            name: $('#form input[name=name]').val(),
            email: $('#form input[name=email]').val(),
            token: token
        }
    },

    transaction_endpoint: 'handlewithdraw'
})

App.Router = Backbone.Router.extend({
    routes: {
        'deposit'   :       'showDepositView',
        'withdraw'  :       'showWithdrawView',
        '*path'     :       'showHomeView'
    },

    showDepositView: function() {
        var depositView = new App.Views.Deposit()
        depositView.render()
    },

    showWithdrawView: function() {
        var withdrawView = new App.Views.Withdraw()
        withdrawView.render()
    },

    showHomeView: function() {
        var homeView = new App.Views.Home()
        homeView.render()
    }
})

var router = new App.Router()

Backbone.history.start()

---

调用

getFormData

方法时，会出现一个错误，表示该函数未定义，即使我在存款和取款视图中都定义了该函数。另外，我在它的正上方添加了一个

console.log（this）

，它将

窗口

对象记录到控制台而不是视图中。我在这里做错了什么？

我觉得这与这个电话有关：

Stripe.card.createToken($('#form'), that.stripeResponseHandler)

尝试使用

.bind（）

将此绑定到调用范围：

---

你真的不需要做

var that=this

，但为了简单起见，我会把它留在里面。

我回家后会试试这个。但从概念上讲，当我真的想在存款和取款视图的上下文中执行stripeResponseHandler函数时，是否会将函数绑定到“this”在Stripe视图的上下文中执行stripeResponseHandler函数？我不这么认为（尽管我应该尝试一下，并给出一个明确的答案）；主干的

extend

方法在扩展视图时返回一个新对象，因此

此

应为扩展视图

Stripe.card.createToken($('#form'), that.stripeResponseHandler.bind(this))