javascript - 在 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 个 react 性计算。

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 之前，这个操作基本上是完全不可能的。

优点:

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

缺点:

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

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

Answer 1

解决这个问题的另一种方法是不存储一个 session 变量来说明所选项目，而是存储列表中所有项目的选择状态，每个都在一个单独的 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 不会使响应式(Reactive)计算无效；我不确定的东西。如果是这种情况，那么我想可以在设置之前检查该值。对此解决方案不是很满意，但这是解决问题的另一种方法。