Question

我正在尝试将Stripe“Pay with Card”结账集成到骨干节点环境中。在服务器端，我使用条带节点代码 - 该部分工作正常。但是，在客户端，我无法捕获该事件。

我想从条纹弹出框中捕获提交事件，在视图中调用“paycharge”方法。

这是我的代码：

<!-- 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');

Answer 1

我认为问题与您的View el以及您正在侦听的事件有关。

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

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

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

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

'click #mysubmitbutton': 'paymentcharge'

希望这有帮助！

如何在backbonejs中集成Stripe“Pay with Card”

1 个答案: