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

I wanted to do something similar to this yesterday to integrate MorrisJS into an Elm generated div

Eventually I came across Arrive JS which uses the new MutationObserver available in most modern browsers to watch the DOM for changes.

So in my case the code looks something like this (simplified):

$(document).ready(() => {
  $(document).arrive('.morris-chart', function () {
    Morris.Bar({
      element: this,
      data: [
        { y: '2006', a: 100, b: 90 },
        { y: '2007', a: 75, b: 65 },
        { y: '2008', a: 50, b: 40 },
        { y: '2009', a: 75, b: 65 },
        { y: '2010', a: 50, b: 40 },
        { y: '2011', a: 75, b: 65 },
        { y: '2012', a: 100, b: 90 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Series A', 'Series B']
    })
  })
})

This watches the dom for any new elements with the .morris-chart class, once found it creates the chart using that new element.

So this is called only after Elm runs the view function and then re-generates the DOM.

Maybe something like this would meet your needs.