javascript - Meteor:项目可以交换的两个名称列表

Question

我开始学习 Meteor 和 Javascript，并尝试创建一个应用程序，该应用程序的一部分有两个名称列表("is"列表和“否”列表)。我希望用户能够在任一列表中选择多个项目，然后单击按钮将所选项目交换到相反的列表。

我最初的设计基于 Meteor 的排行榜示例，但后来意识到它不允许多选，它并没有真正提供我想要的多选功能。

那么，两个问题:

• 为了尝试做到这一点，我在我的名字字典中添加了另一个变量，这样每个名字都有一个“选定”值，该值要么为真，要么为假。然后，从 css 文件中突出显示，当人们单击“切换”按钮时发生的事件将只检查字典中的元素是否具有“selected”= True。这是实现此功能的好方法/可行方法吗？

• Meteor 排行榜示例使用 Session.get、.set 和 .equal 设置并检查“selected_player”。我需要在我的 Javascript 中使用这些函数吗？为什么我不能只使用 individual.selected = 0、'if (individual.selected === 1)' 之类的东西？

Answer 1

回答您的第一个问题:是的，这是一个好方法。

您应该使用Session，因为它是Meteor 提供给您的响应式(Reactive)数据源。阅读the documentation about reactivity了解有关其工作原理的更多信息。我还建议您观看原始的 Meteor 截屏视频，以大致了解 Session 如何提供帮助。简而言之，如果您编写一个从 Session.get 中读取的模板或帮助程序，则只要同一 session key 更新，该模板就会自动重新呈现。

例如，为了尝试一下，您可以使用以下代码，如果您单击按钮，div 的类将在选中和空之间来回切换:

在客户端 javascript 中:

Template.list.selected = function() { return Session.get("selected") ? "selected" : ""; }
Template.list.events({ "click button": function() { Session.set("selected", !Session.get("selected")); });

在模板中:

<template name="list">
  <div class="{{selected}}"></div>
  <button></button>
</template>