在 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")

在 Meteor 0.8 之前，这个操作基本上是完全不可能的。

优点：

• 对于大型列表来说可能是最高效的
• 无需检查大量的反应式计算

缺点：

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

如果您要实现这样的列表，您会选择什么？有没有更好的方法？

Answer 1

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

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 不会使反应式计算无效；我不确定的东西。如果是这种情况，那么我想可以在设置之前检查该值。对这个解决方案不太满意，但这是解决问题的另一种方式。