在Meteor 0.8.0（Blaze）中实现可选择的项目列表

Question

假设我们想要实现一个可选择的项目列表，其中单击列表中的某些内容会通过向其添加selected类并从列表中的任何其他内容中删除此类来突出显示该项目。 Meteor 0.8为我们提供了两种同样可行的方法：

1.反应方式

<template name="dataItem">
    <li class="data-cell {{selected}}">
        {{> dataStuff}}
    </li>
</template>

使用以下代码：

Template.dataItem.events =
  "click .data-cell": (e) ->
    Session.set("selectedTweet", @_id)

Template.dataItem.selected = ->
  if Session.equals("selectedTweet", @_id) then "selected" else ""

在Meteor 0.8之前，这种方法很糟糕，因为选择/取消选择导致整个元素的重新渲染，使得任何DOM操作都被重置。

优点：

• Meteor负责所有渲染，没有逻辑错误
• Blaze只更新已更改的DOM部分 - 不重绘整个模板

缺点：

• 如果列表长度为500个项目，则每次选择或取消选择某些内容时都会检查500个反应计算。

2.纯粹的jQuery方式

<template name="dataItem">
    <li class="data-cell">
        {{> dataStuff}}
    </li>
</template>

用代码：

Template.dataItem.events =
  "click .data-cell": (e, t) ->
    $(".data-cell").removeClass("selected")
    t.$(".data-cell").addClass("selected")

在流星0.8之前，此操作基本上是完全不可能的。

优点：

• 可能是大型列表中性能最高的
• 无需检查大量的反应计算

缺点：

• 在更高级的情况下可能容易出现逻辑错误。
• 感觉就像我们要回到jQuery意大利面的世界。

如果您正在实施这样的列表，您会选择什么？ 有没有更好的方法呢？

Answer 1

解决此问题的另一种方法是不存储一个会话变量来考虑所选项目，而是存储列表中所有项目的选择状态，每个项目都在一个单独的Session变量中。 这样的事情，假设你在allIds列出了所有_id ：

allIds = ...

Template.dataItem.events =
  "click .data-cell": (e) ->
    allIds.forEach((id) -> Session.set("#{id}-selected", ""))
    Session.set("#{@_id}-selected", "selected")

Template.dataItem.selected = ->
  Session.get("#{@_id}-selected")

当然，这假设具有相同值的Session.set不会使反应计算无效; 我不确定的东西。 如果是这种情况，那么我想在设置之前可以检查该值。 对这个解决方案并不满意，但这是解决问题的另一种方法。