Coffeescript/jQuery 模式：跨事件缓存数据

Question

我有一个摘要项目列表，点击时可以通过 Ajax 进行扩展。我在 Coffeescript 中编写了以下代码：

current_open_row = null

$('li.faq-item').live 'click', (event) ->
  $.post("/faqs/update_rows", {old_row_id: current_open_row, new_row_id: $(this).attr('id')}, (data) ->
    replace_items data
  , 'json')
  current_open_row = $(this).attr('id')

这读起来不像是流畅的 Coffeescript，我发现自己在想，“我还能做得更好”，但特别是在点击处理程序范围之外实例化 current_open_row 变量感觉很奇怪。当然，不这样做会在进入处理程序时导致新的实例化，这总是未定义的。

除了将$(this).attr('id') 重构为变量之外，还有什么东西会让人觉得丑陋、次优、不可读等，或者这就是它的方式？

谢谢！

Answer 1

嗯，首先，我想你会发现自己最终会切换到 camelCase... 我知道很多人都非常喜欢 readability_of_underscores，但是你与之交互的每个库（包括 jQuery）都使用 camelCase。只是需要记住的一点。

除此之外，必须使用= null 来限定变量的问题是一个很好的问题。我试图说服 Jeremy 应该有一个更好的作用域语法，但他坚决反对。所以我建议将变量移动到对象属性。幸运的是，这是 jQuery，所以有很多地方可以粘贴数据。使用列表的.data 方法怎么样？这还有一个额外的优势：如果您希望将来在多个列表上执行此操作（每个列表中有一个 current_open_row），您不必稍微更改代码。只需将更多带有.faq-item 子级的列表添加到标记中即可。

还有一点：你给post调用一个回调

(data) -> replace_items data

如果这就是你所做的一切，为什么不直接传递replace_items 呢？ :)

为了便于阅读，我还将post 函数的每个参数放在单独的行中。即使没有花括号，键值对也会自动组合成一个对象。以下是它的外观：

$('li.faq-item').live 'click', (event) ->
  $row = $(this)
  $list = $row.parent()
  row_id = $row.attr 'id'

  $.post(
    "/faqs/update_rows",
    old_row_id: $list.data('current_open_row'),
    new_row_id: row_id,
    replace_items,
    'json'
  )

  $list.data 'current_open_row', row_id