1

这是通过 Stripe.js 提交信用卡表单的通用代码。我需要将其放入我粘贴在下面的 Backbone 视图中：

// 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

我尝试将其装入主干视图（不起作用）：

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;
}

});

4

1 回答 1

3

上下文将不一样。当您将侦听器与events视图中的对象绑定时，上下文将自动绑定到视图本身。
改变：

var $form = $(this);

至

var $form = this.$('#payment-form');
于 2013-04-22T22:03:31.283 回答