resizeWidth binding handler

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<textarea id="element" data-bind="resizeWidth: width, value: value"></textarea>
<h4>
Width
</h4>
<span data-bind="text: width"></span>

JavaScript

ko.bindingHandlers.resizeWidth = {
  update: function(element, valueAccessor, allBindings) {
    const value = valueAccessor();
    let db = null; // de bounce

    new ResizeObserver(([change]) => {
      clearTimeout(db)
      db = setTimeout(() => value(change.contentRect.width), 100);
    }).observe(element);
  }
};

class ViewModel {
  constructor() {
    this.value = ko.observable('something');
    this.width = ko.observable(0);
    this.width.subscribe(newValue => {
      console.log('resize', newValue)
    })
  }
}

viewModel = new ViewModel()
ko.applyBindings(viewModel);