Search code examples
ractivejs

RativeJS - Lifecycle event to know when DOM updates are complete?


I'm new to Ractive.js and wondering if there's a lifecycle event I can use to know whenever Ractive is done making DOM updates in response to data changes?

My use-case is that I have a grid of boxes (simple divs) rendering some text from the data model. Whenever my data model updates, Ractive is properly updating the DOM for me. But when it's finished with that, I want to dynamically adjust the font size within each box to make sure the text fits.

This is just the first thing that crossed my mind for sizing my text to fit and it might not be the right solution... but I'm surprised I haven't found such a lifecycle event?

Here's the doc I'm looking at: http://docs.ractivejs.org/latest/lifecycle-events. My application is using magic mode to handle updates.


Solution

  • Unless someone more knowledgeable basically corrects the documentation, it looks like there's no lifecycle event to listen to.

    However, I've discovered that Ractive's concept of Decorators give me the functionality I was looking for. By passing a Decorator to my Ractive instance, I get passed the DOM nodes created by RactiveJS and I'm able to do whatever work I need to do (in my case, computing whether the text in the node fits in its container and scaling it down in Javascript).