javascript - 如何使 Stripe 适合 Backbone View？

Question

这是通过 Stripe.js 提交信用卡表格的通用代码。我需要将它放入我在下面粘贴的 Backbone View 中:

// Add Submit Btn Event Listener and Stripe Token Generator from fields
    jQuery(function($) {
      $('#payment-form').submit(function(event) {
            event.preventDefault();
            var $form = $(this);
            // Disable the submit button to prevent repeated clicks
            $form.find('button').prop('disabled', true);
            Stripe.createToken($form, stripeResponseHandler);
            // Prevent the form from submitting with the default action
            return false;
      });
    }); // End jQuery random function
    var stripeResponseHandler = function(status, response) {
    var $form = $('#payment-form');
        if (response.error) {
            // Show the errors on the form
            $form.find('.payment-errors').text(response.error.message);
            $form.find('button').prop('disabled', false);
        } else {
            // token contains id, last4, and card type
            var token = response.id;
            // Insert the token into the form so it gets submitted to the server
            $form.append($('<input type="hidden" name="stripeToken" />').val(token));
            // and submit
            $form.get(0).submit();
        }
    }; // End stripeResponseHandler

我尝试将其放入主干 View (无效):

WhiteDeals.Views.ProgramPayment = Backbone.View.extend({

initialize: function() {
    _.bindAll(this);
}, 

events: {
    "submit form#payment-form":  "createStripeToken"
},

createStripeToken: function(event) {
    event.preventDefault();
    var $form = $(this);
    // Disable the submit button to prevent repeated clicks
    $form.find('button').prop('disabled', true);
    Stripe.createToken($form, stripeResponseHandler);
    // Prevent the form from submitting with the default action
    return false;
},  // createStripeToken

stripeResponseHandler: function(status,response) {
    var $form = $('#payment-form');
    if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and submit
        $form.get(0).submit();
    }
}, 

render: function () {
    var dealProgram = this.model.toJSON()
    this.$el.html(JST['program/payment']({ dealProgram: this.model.toJSON() }));
    // Show Payment Modal
    $('#payment-modal').modal({
      show: true,
      keyboard: true,
      backdrop: true
    })
    return this;
}

});

Answer 1

上下文不会相同。当您将监听器与 View 中的 events 对象绑定(bind)时，上下文将自动绑定(bind)到 View 本身。
变化:

var $form = $(this);

到

var $form = this.$('#payment-form');