4

我正在尝试将 Stripe“用卡支付”结账集成到骨干节点环境中。在服务器端，我使用的是 Stripe Node 代码——这部分效果很好。但是，在客户端，我无法捕获该事件。

我想从 Stripe 弹出窗口中捕获提交事件，以在视图中调用“paymentcharge”方法。

这是我的代码：

<!-- Stripe Payments Form Template -->
<form id="stripepaymentform" class="paymentformclass">
   <script
       src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
       data-key="pk_test_xxxxxxxxxxxxx"
       data-amount="0299"
       data-name="MyDemo"
       data-description="charge for something"
       data-image="assets\ico\icon-72.png">
   </script>
</form>

骨干视图类

myprog.PaymentPanelView = Backbone.View.extend({
    initialize: function () {
        this.render();
    }, 
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
    events : {
        "submit" : "paymentcharge"
    },
    paymentcharge : function( event) {
        this.model.set({stripeToken: stripeToken});
    } 
});

骨干模型类

var PaymentChargeModel = Backbone.Model.extend({
    url: function(){
        return '/api/paymentcharge';
    },
    defaults: {
    }
})

从标题菜单事件设置/调用视图

if (!this.paymentPanelView) {
    this.paymentPanelView = new PaymentPanelView({model: new PaymentChargeModel()});
}
$('#content').html(this.paymentPanelView.el);   
this.paymentPanelView.delegateEvents();
this.selectMenuItem('payment-menu');
4

1 回答 1

0

我认为问题与您的视图el和您正在收听的事件有关。

你永远不会明确定义你的 View el，这意味着它被初始化为一个分离的<div>元素。<div>然后，您使用模板用模板中的表单元素填充它。即使您<div>是分离的，您也可以看到内容，因为您将您的内容添加el到#content使用 jquery。

我认为问题在于您正在侦听您的事件submit，而不是包含的事件。尝试将您的事件哈希更改为：<div>el<form>

events: {
    'submit form#stripepaymentform': 'paymentcharge'
}

基本上，监听包含元素上的事件，如 jquery 中的.on. 您也可以直接点击按钮，如下所示：

'click #mysubmitbutton': 'paymentcharge'

希望这可以帮助！

于 2017-07-29T10:54:22.347 回答