Using helper to update css class

help
1

Hi,

On my app users can select things they want to do = “todos”. those things are saved on a global array on the client.js (it updates to and from mongoDB, so this is the main place i want to store the things the users wants to do).

the list of options the user can choose from is stable on the screen (static on the HTML), but i do want an indicator that an option (a “todo”) is selected, such as change of color.

i created this helper, but obviously im missing something:

each option in HTML (the 1 is for the click event to add the id name to the todos array):

  <div class="col-sm-6 col-md-4 1" id='food'>
    <div class="thumbnail">
      <img src="#" alt="...">
        <p>food</p>
    </div>
  </div>

the array that collects the todos (its never empty, because its constantly updated from mongo):

user_todos = [];

the helper: (basically it goes over the array, “finds” the objects with an id matching the item, AND NOW IM STUCK ON UPDATING THE CLASS NAME

Template.todos.helpers({
  selcted: function() {
    for (var i = 0; i < user_todos.length; i++) {
      var object = document.getElementById(user_todos[i]);
      object.className = 'yello_box'
    }
  }
});

please note that if i use this logic (get an element by id and change the class) as an on click event it works. im just not sure how to use the helper that iterates over an array corectly.

any ideas?

thanks!

2

I probably wouldn’t use a helper in the way that you are. Helpers are good to return values based on logic, but not very effective at getting/setting properties on your data or in your DOM. Events would be better for that. If you are only using the “select” property on the client (not saving it to the server), you could just use an event:

Template.myTemplate.events({
  'click .item' (e) {
    e.target.classList.toggle('selected');
  },
});

If you were persisting that in the database, you could then use an event and a helper:

<ul>
  {{#each todo in todos}}
    <li class="item {{#if todo.selected}}selected{{/if}}" data-id="{{todo._id}}">
      {{todo.text}}
    </li>
  {{/each}}
</ul>

Template.myTemplate.events({
  'click .item' (e) {
    Meteor.call('toggleSelectedById', e.currentTarget.dataset.id);
  },
});

Meteor.methods({
  toggleSelectedById (itemId) {
    const item = Items.findOne({ _id: itemId });
    Items.update({
      _id: itemId,
    }, {
      $set: {
        selected: !item.selected,
      },
    },
  },
});

Super basic idea, but hopefully it helps!

3 Likes
3

hi, thanks!

yes, it helped a lot!!!

1 Like