Is there an event that fires after the DOM is updated as the result of an observed property?

Issue

Is there an event that gets fired after the DOM is updated as the result of an observed property being changed?

Specifically, I need to alter the scrollTop property of a container to show new content as it’s added. I have to use a timeout now to wait until the DOM is updated before setting the scrollTop to the new scrollHeight.

Solution

Thanks for the question. From my understanding, the changes propagate through the models and DOM asynchronously. It’s not clear there is one “ok, literally everything all the way through is done updating” event (I could be wrong).

However, I’ve used Mutation Observers to know when something in my DOM changes. If you’re able to watch a specific place in the DOM for a change (or changes), try Mutation Observers: https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/mutation_observers

Here is an example:

  MutationObserver observer = new MutationObserver(_onMutation);
    observer.observe(getShadowRoot('my-element').query('#timestamps'), childList: true, subtree: true);


  // Bindings, like repeat, happen asynchronously. To be notified
  // when the shadow root's tree is modified, use a MutationObserver.

  _onMutation(List<MutationRecord> mutations, MutationObserver observer) {
    print('${mutations.length} mutations occurred, the first to ${mutations[0].target}');
  }

Answered By – Seth Ladd

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *