Meteor:项目之间可以交换的两个名称列表

时间:2012-12-23 17:51:25

标签: javascript meteor

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

我最初将此设计基于Meteor的排行榜示例,但后来意识到这不允许多项选择,而不是真正适应我想要的多项选择功能。

所以,有两个问题:

  • 为了尝试这样做,我将另一个变量添加到我的名称字典中,这样每个名称都有一个“selected”值,该值为true或false。然后,突出显示css文件和人们点击“切换”按钮时的事件,只检查dict中的元素是否“selected”= True。这是实现此功能的好/可行方式吗?

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

1 个答案:

答案 0 :(得分:1)

回答你的第一个问题:是的,这是一个很好的方法。

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

例如,要尝试一下,这里有一些代码可以使用,如果单击按钮,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>