Why does the helper insideWith inside the #with-block gets recomputed when foo changes? The helper is not referencing any reactive data source!
foo.js
var foo;
if (Meteor.isClient) {
foo = new ReactiveVar();
foo.set(0);
Template.board.helpers({
obj: function() {
return {
foo: foo.get()
};
},
insideWith: function() {
return console.log('insideWith');
},
fooInsideWith: function() {
foo.get();
return console.log("fooInsideWith ");
},
notInsideWith: function() {
return console.log('notInsideWith');
},
fooNotInsideWith: function() {
foo.get();
return console.log("fooNotInsideWith ");
}
});
Template.board.events({
'click button': function(e, t) {
return foo.set(Math.floor(Math.random() * 10));
}
});
}
foo.html
<body>
{{> bar}}
</body>
<template name="bar">
<div class="bar">
<button>Random</button>
<div>
{{#with obj}}
{{insideWith}}
{{fooInsideWith}}
{{/with}}
</div>
<div>
<span>{{obj.foo}}</span>
{{notInsideWith}}
{{fooNotInsideWith}}
</div>
</div>
</template>
from the comments (@fuzzybabybunny):
{{#with}} will run automatically whenever obj changes because obj is a helper with the reactive data source foo. {{insideWith}} is nested inside of {{#with}}, so obviously it runs as well.