CODEWITHSUNDEEP
meteor
Matt K
Matt K

Reputation: 4948

Meteor reactivity with helpers

Debugging an app & I stumbled upon something I never noticed before. For a quick example, I've got a simple link with 2 helpers to style it, like this:

<a class="{{tabHasError}} {{activeTab}}">Test</a>

The helpers that go into this are as follows:

tabHasError: function() {
  console.log('invalidated!');
}
activeTab: function() {
  if (Session.equals('activeTab', this.tabIdx)) return 'active';
}

Now, every time the Session var changes, activeTab gets invalidated, which is expected. What's not expected is that tabHasError is also invalidated. Why does this happen? Is this normal? Is it because they're both attached to the same element? Aside from merging the functions, any way to avoid this? Or even better, why did MDG make this design decision?

Upvotes: 0

Views: 52

Answers (2)

JVercout
JVercout

Reputation: 130

With iron-router, it's normal to observe the behavior you're describing.

The current template in use will be refresh as soon as there is a change into the main computation dependencies. Calling Session.set will call the refresh of the template variable. For sure, it's a lot, but it is one of the simplest way to be sure the template is always up-to-date.

If you're looking for larger app, you could have a look on React.js integration, which will give you the ability to refresh only the good variable on your template.

In fact, in your example, the value of tabHasError should not change, but the re-rendering of the template will called the function tabHasError to check if there is any change. In this case, no.

I'm around if the behavior isn't clear enough. Have a tremendous Sunday!

Upvotes: 2

M&#225;rio
M&#225;rio

Reputation: 1612

I noticed that this only happens in an element's attributes. I think this behaviour is very specify, according to Event Minded videos regarding the previous UI engine (Shark): it only rerenders affected DOM elements.

Having in consideration that in your code Blaze is rerendering the DOM element, it makes sense to invalidate previous computations related to it. If you place this helper inside the a element it won't be invalidated.

Upvotes: 1

Related Questions