Reef event data / store changed?

[pwFoo]

Hi, is there a event for data changes ? I try to learn how to add event listener for reactive data changes in reef data / store.

I know the documentation with pre defined events like reef:render and reef.emit() to trigger events, but how to hook into changed data?

[cferdinandi]

At the moment, there isn't one. Could you tell me a bit more about the use case you're thinking about?

[pwFoo]

I try to use Reef.Store to fill data to dom elements (not a component, no template return value!).

Maybe similar to reef-checked, reef-selected and reef-value, but for element innerHTML or a custom attribute to fill with data from Store.

Because there is no html data binding like reef-data or reef-content I try to build it with a event listener to trigger dom updates after values are changed.

UPDATE Update ${expression} in dom elements would be great, but I think much more complex than javascript based content / innerHTML updates in DOM. I don't return all the markup by component templates and try to fill / update html layouts based on store and some reef components.

[pwFoo]

Maybe two event listener?

1. any change of store / data object
2. a change done by a setter function

[cferdinandi]

There's a few concerns here...

1. Firing an event every time the data is updated creates the possibility of accidentally creating infinite loops (ex. when the data is updated, you make another update to it).
2. If the intent is to update the UI when data is updated, that should be a Reef component. If not, I'd recommend a different state-management model than Reef was designed for.

[pwFoo]

@cferdinandi Is there a limit how much (small) components could / should be used on a site? As example small one dom node elemet components?

[cferdinandi]

No limit, no. There are a lot of factors that could impact performance, including how deeply nested components are and how frequently data is being updated.