骨干视图：功能未定义

Question

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

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)，它将Window 对象记录到控制台而不是视图。我在这里做错了什么？

Answer 1

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

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

尝试使用.bind()将this绑定到调用范围：

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

你真的不需要var that = this，但为了简单起见，我会留下它。