Watcher on dataset

Question

I want to use a watcher on a dataset. This is my code:

Html:

<div id='my-hidden-content' data-is-collapsed='true'>My hidden content</div>

Javascript:

document.getElementById('my-hidden-content').dataset.watch('isCollapsed', function(id, oldval, newval) {
    console.log('Collapsed changed', id, oldval, newval)
});

My console puts out this error:

'Uncaught TypeError: document.getElementById(...).dataset.watch is not a function'

How could I use a watcher on a dataset without using any frameworks?

*Edit I'm try to build a component which could be implementend into every framework and adding classes to it's node if the value of the dataset changes.

If you are trying to use the good old [watch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch) from Netscape times, you need Firefox (or, of course, Netscape Navigator). If it's something else, please edit the question and provide further details. — Álvaro González, May 04 '17 at 09:21
Could try @Eli's [`object.watch shim`](http://stackoverflow.com/a/1270182/6224482) — Sandman, May 04 '17 at 09:23
@Sandman this was what I've tried. But the Dataset is a DOMStringMap and defineProperty is not a function of this object type. — Pablo Christiano, May 04 '17 at 09:26
@ÁlvaroGonzález I hope this edit could tell you more about my issue — Pablo Christiano, May 04 '17 at 09:30
@PabloChristiano Well, the only thing you edit adds to the question is a vague impression that you possibly read about `watch` in some book or tutorial from the late 20th century. Both JavaScript and the DOM have changed **a lot** in the last few years, you need to use up-to-date reference and always be sure about compatibility, esp. if you want to write a reusable component. — Álvaro González, May 04 '17 at 09:41
@ÁlvaroGonzález That's why i've asked how to use this old method or something simular. `MutationObserver` does what I need. — Pablo Christiano, May 04 '17 at 09:51

score 5 · Accepted Answer · answered May 04 '17 at 09:49

5

After searching for a better solution I've found MutationObserver which helped me a lot.

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'data-is-collapsed') {
          // do something
        }
      });
    });
    observer.observe(document.getElementById('my-hidden-content'), {
      attributes: true, childList: false, characterData: false
    });

answered May 04 '17 at 09:49

Pablo Christiano

365
3
21

Hey, trying to implement something similar. Did you run into any issues? – eMontielG Feb 20 '20 at 12:44
@eMontielG sorry for the late response. I used this a lot and the only issue I had was memory leaks. The problem is that you have to be very specific in what you want to observe. You also have to disconnect the observer when the node gets removed otherwise you getting crazy because you don't find the mistake. After a while, I went over to RXJS for observing. this makes your life way easier. If you can use a data binding lib, a framework or try to avoid this. this is more or less the last chance – Pablo Christiano Apr 24 '20 at 08:22

Watcher on dataset

1 Answers1