How to coordinate rendering with port interactions (Elm 0.17)

Question

I would like to integrate Elm with a Javascript library in such a way that Elm would dynamically create \"cells\" (html divs), and Javascript would be provided with their id

Answer 1

As of 0.17.1, there is no good way to achieve that.

The easiest I could recommend is using setTimeout to wait at least 60ms or wait until the next requestAnimationFrame

Consider this example:

demoApp.ports.onCellAdded.subscribe(function(cellID) {
   setTimeout(function() {
      if(document.getElementById('cell:' + cellID) === null) {
         window.alert("Cannot find cell " + cellID)
      }
   }, 60);
});

There is a feature request #19 to add a hook, so it is possible to know when the HTML Node is in the DOM.

You can the progress here, most likely it will be in the upcoming releases.