CODEWITHSUNDEEP
knockout.js
Andreas Zita
Andreas Zita

Reputation: 7580

Event when Knockout updates the DOM after a single property binding has changed

I know about afterRender in foreach-loops.

What I want is a way of getting notified when Knockout makes a change in the DOM in response to a certain viewmodel property change.

Let's say I have a viewmodel with a single ko-observable property "text", which is bound to a div as text-content.

Adding afterRender on a single property-binding does'nt seem to working in this case.

I could listen for changes in the property itself by subscribing on it, but in my case I'm going to read out the flowing div height which, of course, is based on the bound text-content. But by subscribing I will get notified before the DOM has been updated and the div still have the old height.

I would like something similar to afterRender, perhaps afterUpdate?, triggered whenever a binding has updated the DOM view based on a changed vm-property.

Is this possible somehow allready? With some tweaking of the Knockout-code perhaps?

Upvotes: 1

Views: 1042

Answers (1)

hagabaka
hagabaka

Reputation: 81

I accomplished this using the DOM Mutation Observer API. Use the attr binding to bind the watched property to an attribute on the element, and then use MutationObserver's attributeFilter option to configure it to only observe changes to that attribute.

<script>
  viewModel = {

    myProperty: ko.observable('...'),

  }

  // Set up a call back to be fired after each series of modifications to
  // "data-my-property" attributes in the subtree
  var mutationObserver = new MutationObserver(function() {
    // Do things in response to DOM mutation
  });
  mutationObserver.observe(document.querySelector('#watch',
    {subtree: true, attributeFilter: ['data-my-property']});

</script>

<body>

    <!-- Bind data-my-property to the viewModel property to be watched -->
    <div id="watch" data-bind='text: myProperty, attr: {"data-my-property": myProperty}'>

</body>

Upvotes: 1

Related Questions