Meteor using different Sessions with {{#each}} for click event

Question

I want to use different Sessions for a specific click event within a {{#each}} block. The problem is that HTML elements will be displayed for all {{#each}} block members, but I only want it for the one, a user performs the click event on.

Here is my code:

  ...
            {{#each articles}}
              <tr id="{{_id}}" class="article-row">
                   <td class="articles">
                          {{> article}}
                   </td>
             </tr>
           {{/each}}
  ...



  <template name="article">
        {{#if editArticle}}
            <div class="input-group">
                <span class="input-group-addon">Edit article</span>
                <input type="text" name="edit-article-input" class="form-control" placeholder="Name your article." value="{{title}}">
                <span class="input-group-btn">
                    <button class="btn btn-success glyphicon glyphicon-ok edit-article-submit" data-type="last"></button>
                </span>
            </div>
        {{else}}
            <div class="panel panel-default article">
                <div class="panel-heading">
                    <h3 class="panel-title">{{title}}</h3>
                </div>
                <div class="panel-body">
                        <button class="glyphicon glyphicon-pencil btn btn-default btn-xs edit-article"></button>
                </div>
            </div>
        {{/if}}
    </template>

Helper methods and events:

Template.article.helpers({
    editArticle: function() {
        return Session.equals('editArticle', true);
    }
});

In the template with the {{#each}} block I use this helper method:

'click .edit-article': function(e, t) {
        e.preventDefault();
        Session.set('editArticle', true);
}

Now the problem is, that if I click on the button .edit-article the {{#if editArticle}} block appears on every article. I just want it for the one I clicked on.

Any help would be greatly appreciated.

Answer 1

This is a perfect example of how Session isn't always the right tool for the job when it comes to template reactivity. Unless you actually need to know which article is being edited outside of the template, I'd strongly recommend using a ReactiveVar or ReactiveDict rather than a global variable like Session . It's a little more to write but, in my opinion, a much more encapsulated and elegant solution. Here's the outline of the code you'd need:

Template.article.created = function() {
  this.isEditing = new ReactiveVar(false);
};

Template.article.events({
  'click .edit-article': function(e, template) {
    e.preventDefault();
    template.isEditing.set(true);
  },
  submit: function(e, template) {
    e.preventDefault();
    template.isEditing.set(false);
  }
});

Template.article.helpers({
  editArticle: function() {
    return Template.instance().isEditing.get();
  }
});

Note that you'd need to do meteor add reactive-var for this to work. For more details, see my post on scoped reactivity .