Creating a comment reply system

help
1

Hey,

I’m trying to build a comment reply system.
This is what I got so far:

in several templates, where I just take the comments out of a database with a helper:

{{#each textComments}} {{> comment}} {{/each}}

the comment template:
{{author}}: {{text}} <a href="">reply</a> {{#if replyField}} <input name="reply" id="newComment" type="text" > {{/if}}
now I want to show the input field when the anchor tag is clicked
BUT only for the one template where the anchor tag was clicked

so a helper like

replyField: function() { var x = clickValue.get() if (x) { return true; } else { return false; } }

(where ‘clickValue’ is set inside an event helper) does not work because it is set for all templates eg. all comments show the inputfield.

Any suggestions on a different approach to get this working?

2

As long as clickValue will be created in comment template, I dont see any issue in this.
And I would write return template.clickValue.get();

If you check docs for reactive var you can see that they can be used in template.

3

In a helper use Template.instance().clickValue.get() to get the reactive var

4

thusstyles got me on the right track.
here’s what I did:

Template.comment.onCreated(function() { this.test = new ReactiveVar; this.test.set(false); });

Template.comment.helpers({ replyField: function() { var x = Template.instance().test.get(); if (x) { return true; } else { return false; } } });

Template.comment.events({ 'click a': function() { var x = Template.instance().test.get(); if (x) { Template.instance().test.set(false); } else { Template.instance().test.set(true); } } });

Thanks a lot :smile:

5

Also you could shorten that to this -

Template.comment.onCreated(function() {
    this.test = new ReactiveVar(false);
});

Template.comment.helpers({
    replyField: function() {
        return Template.instance().test.get();
    }
});

Template.comment.events({
    'click a': function(e, t) {
        t.test.set(!t.test.get());
    }
});
1 Like