Meteor: Two lists of names that items can swap between

Question

I'm starting off learning Meteor and Javascript and trying to create an app which has a part where there are two lists (a "yes" list and "no" list) of names. I want users to be able to select multiple items on either list and click a button to swap the selected to the opposite list.

I was originally basing this design off of the leaderboard example from Meteor but have since realized that that doesn't allow for multiple selection, not does it really accommodate the multiple selection functionality I want.

So, two questions:

• To try to do this, I'm adding another variable to my dictionary of names, such that each name has a "selected" value that's either true or false. Then, highlighting from the css file and the event when people click on a "switch" button will just check if an element in the dict has "selected" = True. Is this a good/feasible way to do implement this functionality?

• The Meteor leaderboard example sets and checks for "selected_player" with Session.get, .set, and .equal. Do I need to use those functions in my Javascript? Why can't I just use something like individual.selected = 0, 'if (individual.selected === 1)' and the like?

Answer 1

To answer your first question: yes, that's a good approach.

You should use Session because it's a reactive data source provided to you by Meteor. Read the documentation about reactivity to learn more about how this works. I also recommend watching the original Meteor screencast for an overview of how Session can help. Briefly, if you write a template or helper that reads from Session.get, the template will automatically re-render whenever that same Session key is updated.

For instance, to try it out, here is some code you can use where if you click the button, the div's class will swap back and forth between selected and empty:

In client javascript:

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

In a template:

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