In batman.js, all properties should be declared with
@accessor. When I say property, I mean a property declared with
When a property’s value is retrieved (with
get), it tracks calls that it makes to other properties. These internal calls (to
get) define the property’s sources. The value will be cached. Since it knows what it depends on, they only recalculate themselves when their caches are busted. (Passing the
cache: false option makes a property not cached.) When one of the property’s sources are changed, its cache is busted and it will recalculate next time you
get its value.
After a property recalculates, it checks if its new result doesn’t equal its cached result (
!== , CoffeeScript
isnt). If it determines a new value, then the property busts its dependents’ caches, too
To sum up the introduction:
- Sources are tracked at calculation-time, not load time. They’re tracked when a property calculates itself.
- A property isn’t caluclated if it’s never retrieved.
- A property is cached and isn’t recalculated until one of its sources signals a change.
- When a property’s source changes, the cache is busted and it will recalcute next time it is retrieved with
- If the result of recalculation is a different value (
!==), the property notifies its subscribers (if present) to recalculate.
A Day in the Life of a Batman.js Property
fullName is the quintessential computed property:
Let’s see how it’s used with a
Person. You can get metadata for a property with the
When a person is initialized, the
fullName has no value:
It hasn’t been requested yet, so it hasn’t been calculated. The property also has no sources:
However, if you
get the property, it will be calculated and its sources will be identified.
Now let’s inspect the underlying
Its value is cached:
And it knows its sources:
If you change one of
fullName’s sources, it is no longer cached:
1 2 3
And since we haven’t asked for its value again, it hasn’t been recalculated:
getting its value will cause it to be recalculated & cached:
1 2 3
Here’s the same story, in a chart: