In Meteor, how do I update a property on only one instance of a template?

Question

If I have a binding {{# each}} in Meteor, and I want to update the property on only one instance of the template inside #each. How can I do it? I tried setting the value in the template object inside the event map, but this does not seem to be reactive. I also tried to bind the Session property, but this will update each instance instead of what I want ...

eg:

{{#each dates}} {{> dateTemplate}} {{/each}} <template name="dateTemplate"> {{date}} <span style="color: red;">{{errorMsg}}</span> <--- how do i update errorMsg? </template> Template.dateTemplate.events({ 'click': function(event, template) { template.errorMsg = 'not valid'; <--- this doesn't do anything } }); 

CHANGE ADDRESS ANSWER BELOW:

 Template.dateTemplate.events({ 'click': function(event, template) { template.errorMsg = function() { return 'not valid';} <--- this also doesn't do anything } }); 

Answer 1

You do not need to use rudders for this because it is not something that requires reactivity to send a message, reactive variables work best with db data or data that will be updated by another client over the air.

You can use jQuery (enabled by default) to update it, it can also get a little involved:

 <template name="dateTemplate"> {{date}} <span style="color: red;display: none" class="errorMessage"></span> </template> Template.dateTemplate.events({ 'click': function(event, template) { $(template.find('.errorMessage')).html('Your Error Message').slideDown(); } }); 

Ive edited it so that the error is hidden by default and shifted with the animation

Answer 2

I am experimenting with this by passing a different reactive object to each instance of the template. Then the template can communicate with the reactive object (which is unique for each instance), and we do not have an additional template.

It looks like this:

Initial Render:

 Template.firstTemplateWithPoll(ContextProvider.getContext()) Template.secondTemplateWithPoll(ContextProvider.getContext()) // (I actually pass getContext an identifier so I always get the same context for the same template) 

JS:

 Template.poll.events = { 'click .yes' : function() { this.reactive.set('selection', 'yes'); }, 'click .no' : function() { this.reactive.set('selection', 'no'); } }; Template.poll.selection = function(arg) { return this.reactive.get('selection'); } 

Template:

 <template name="poll"> <blockquote> <p> Your selection on this poll is {{selection}} </p> </blockquote> <button class='yes'>YES</button> <button class='no'>NO</button> </template> 

Answer 3

template.errorMsg should be a function that returns your error.

 Template.dateTemplate.events({ 'click': function(event, template) { template.errorMsg = function() { return 'not valid'; }; } });