Question

我正在尝试配置coffeescript类来管理条带付款。我的解决方案基于this tutorial。

这是我的代码：

class Subscription  

  count = 0

  page =
    createForm: "form#new_subscription"
    createButton: 'input#create_subscription[type=submit]'
    cardNumber: '#card_number'
    cardCode: '#card_code'
    cardMonth: '#card_month'
    cardYear: '#card_year'
    stripeError: '#stripe_error'

  setupForm: ->
    console.log "binding to submit"
    $(page.createButton).click (e) -> 
      $(page.createButton).attr('disabled', true)
      @processCard()
      return false

  processCard: ->
    console.log "processing card"
    card =
      number: $(page.cardNumber).val()
      cvc: $(page.cardCode).val()
      expMonth: $(page.cardMonth).val()
      expYear: $(page.cardYear).val()

    Stripe.card.createToken(card, subscription.handleStripeResponse);

  handleStripeResponse: (status, response) ->
    if response.error
      console.log "error"
      $(page.stripeError).text(response.error.message)
      $(page.createButton).attr('disabled', false)
      alert ("bla")
    else
      alert("success: " + response.id)

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subs = new Subscription
  subs.setupForm()

问题是当我点击提交按钮时，我得到例外：

Uncaught TypeError: Object #<HTMLInputElement> has no method 'processCard'

我认为这是由于click事件self调用的方法是触发事件的html元素。而我自己需要javascript对象。

有关如何解决此问题的任何线索？

谢谢，

Answer 1

如果不测试实际代码，看起来你的范围错了。

setupForm: ->
  console.log "binding to submit"
  $(page.createButton).click (e) => 
    $(page.createButton).attr('disabled', true)
    @processCard()
    return false

使用=>中的胖箭头$(page.createButton).click (e) =>），您可以在回调中传递外部范围this，然后可以调用@processCard()（其中@将引用new Subscription实例，而不是this的jQuery HTMLInputElement引用。

未捕获的TypeError：对象＃<htmlinputelement>没有方法'processCard'</htmlinputelement>

1 个答案: