ReactiveVar get() not responding in Events

help
1

So when a button is pressed, my app should take a reactive var and increment it. For some reason, events will allow me to set the reactivevar, but if I try to use get within an event, it always returns the original value of the reactive var.

In the example below, no matter how many times I click .quickChange, the rating ReactiveVar will always be ‘1’. I’ve manually set it to other values, confirmed that it’s correct, then hit .quickChange and it goes back to ‘1’.

Any idea what’s happening?

Template.slider_task.onCreated(function(){
    this.rating = new ReactiveVar(0);
})


Template.slider_task.events({
    "click .quickChange": function(e, template) {
        template.rating.set(template.rating.get() + 1);
    }
})
2

Works here. Is there some other code you are not showing?

3

I’m thinking it might be connected to how I’m creating the template, which is this:

{{#each task in taskCollection}}
    {{>slider_task task}}
{{/each}}

I’ve realized that I have identical code in another place in my app, and it works fine. Which makes me think that there’s some issue with creating templates in this way.

4

That shouldn’t matter. I just created a little test and it worked.

client/counters.html

<template name="counters">
	<div class="well">
		<h1>Counters</h1>
	</div>

	<div class="content">
		{{#each counter in counters}}
			{{>counter_test counter}}
		{{/each}}
	</div>
</template>

<template name="counter_test">
	<div class="panel panel-default">
		<div class="panel-heading">{{name}}</div>
		<div class="panel-body">
			<button class="btn btn-success">Increment
				<span class="badge">{{counter}}</span>
			</button>
		</div>
	</div>
</template>

client/counters.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './counters.html';

Template.counter.helpers({
	counters(){
		console.log('counter.counters');
		return [
			{name: "one"},
			{name: "two"},
			{name: "three"}
		]
	}
});

Template.counter_test.onCreated(function(){
	this.value = new ReactiveVar(0);
});
Template.counter_test.helpers({
	counter(){
		var template = Template.instance();
		return template.value.get();
	}
});
Template.counter_test.events({
	'click button'(event, template){
		template.value.set(template.value.get()+1)
	}
});
1 Like