Sessions vars not updating DOM fast enough in Meteor - meteor

Question

I noticed this property of Session vars:
test.html
<input name='test' type='text' placeholder='something' value='{{testVal}}'>
test.js (template.test.helpers)
testVal: function(){
return Session.get("testVal");
}
template.test.onRendered
// Sets the initial value of the session var and the form shows "I like cats"
Session.set("testVal", "I like cats");
var displayValue = function(newInput){
Session.set("testVal", newInput);
console.log("session has been set to: ", newInput);
console.log("value of form entry using jQuery: ", $('input[name="test"]').val());
};
When I run displayValue("lalalalal") in Chrome Console I get:
"session has been set to: lalalalal"
"value of form entry using jQuery: I like cats."
The value of the text input does visually change reactively to "lalalalal" after setting the new value for the session variable, but it seems that the DOM update from the session variable isn't quick enough - jQuery still picks up the old value before the reactive change, which implies that reactive updates to the DOM for Session Vars is async.
So this means that if you use reactive variables to auto-update form fields and you're using jQuery to then grab the form values, you need some way to wait until the DOM has been fully updated before you can use jQuery.
Does anyone know any way to do this, ideally in the context of this example?

Answer 1

In this particular example, why not just using the value you're setting the Session var with, ie newInput ?
The problem with your code is that reactive programming on the client is asynchronous by nature : when you set the Session variable to a new value, you're invalidating the reactive computation within the helper responsible for setting the value of the DOM input inside the template markup.
You may use Tracker.afterFlush to let the reactive computation invalidation propagates and rerun the helper, thus really changing the input value that you'll be able to grab back using jQuery.
var displayValue = function(newInput){
Session.set("testVal", newInput);
console.log("session has been set to: ", newInput);
Tracker.afterFlush(function(){
var testValue = $('input[name="test"]').val();
console.log("value of form entry using jQuery: ", testValue);
});
};