Question

我正在实施一个基本的“购物车”，您可以在其中更改产品并重新计算总价。

我想在同一方法中访问实例和 jQuery的此实例，特别是 product_change（）< / em>的

class Cart constructor: -> @bind_listeners() bind_listeners: -> $('td.product').on 'change', 'select',@product_change update_prices: -> # For each row of items get span.subtotal and sum # Replace content of "total" field with result product_change: -> # Get new product's price. I need jQ's 'this' new_price = $(this).find ':selected' # Replace subtotal field $('span.subtotal').html new_price # Update all prices. I need instance's 'this' @update_prices()

我现在的工作解决方案是使用胖箭change将 update_prices 作为=>事件的另一个绑定方法。但是我宁愿选择更漂亮的替代品。

class Cart constructor: -> @bind_listeners() bind_listeners: -> $('td.product').on 'change', 'select',@product_change # Call update_prices here $('td.product').on 'change', 'select',@update_prices update_prices: -> # For each row of items get span.subtotal and sum # Replace content of "total" field with result product_change: -> # Get new product's price. I need jQ's 'this' new_price = $(this).find ':selected' # Replace subtotal field $('span.subtotal').html new_price # Update all prices. I need instance's 'this' #@update_prices()

Answer 1

使用目标jQuery传递给事件处理程序，而不是使用jQuery在调用事件处理程序时设置的this值。它们都是同一个对象：触发事件的DOM元素。

所以你的代码变成了：

class Cart
  constructor: ->
    @bind_listeners()
  bind_listeners: ->
    $('td.product').on 'change', 'select', @product_change.bind(@)
  update_prices: ->
    # For each row of items get span.subtotal and sum
    # Replace content of "total" field with result
  product_change: (e) ->
    # Get new product's price. I need jQ's 'this'
    new_price = $(e.currentTarget).find ':selected'
    # Replace subtotal field
    $('span.subtotal').html new_price
    @update_prices()

（请注意，我已使用.bind来防止在jQuery调用this时覆盖product_change的值。或者，您可以使用{{来定义方法1}}完成同样的事情。）

在方法中使用=>来始终引用这些方法附加到的对象，而不是其他方法，这将使您的CoffeeScripter生活变得更加容易。

使用coffeescript访问类实例和jQuery

1 个答案: