How to coordinate rendering with port interactions (Elm 0.17)
<p>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-s and use them to perform custom operations. The sequence I want to have is </p>

<ol>
<li>Elm creates a cell (and assigns id)</li>
<li>Message with id is sent to port</li>
<li>Javascript receives message and performs its action</li>
</ol>

<p>This is how I implemented this at the beginning (<a href="https://github.com/lguminski/elm-task-chain-and-port/tree/v1" rel="noreferrer">full source</a>):</p>

<pre><code>port onCellAdded : CellID -&gt; Cmd msg

update : Msg -&gt; Model -&gt; (Model, Cmd Msg)
update message ({cells} as model) =
  case message of

    Push -&gt;
      let
        uid = List.length cells
      in
      ({ model
        | cells = [uid] ++ cells
      }, onCellAdded uid)
</code></pre>

<p>The problem was that Javascript on the other side </p>

<pre><code>var container = document.getElementById('app');
var demoApp = Elm.RenderDemo.embed(container);

demoApp.ports.onCellAdded.subscribe(function(cellID) {
   if(document.getElementById('cell:' + cellID) === null) { window.alert("Cannot find cell " + cellID) }    
});
</code></pre>

<p>complained that such id cannot be found. Clearly the view hasn't been rendered yet.</p>

<p>So I added another state (<code>OnCellAdded</code>) to the Elm application, hoping that the flow would be like this:</p>

<ol>
<li>Elm creates a cell (on Push) and requests (<code>Task.perform</code>) an asynchronous task <code>OnCellAdded</code></li>
<li>Here the view gets rendered</li>
<li><code>OnCellAdded</code> gets called and message with id gets sent to port</li>
<li>Javascript receives the message and performs its action</li>
</ol>

<p>The implementation looked like this (<a href="https://github.com/lguminski/elm-task-chain-and-port/commit/257ca07d82ba73f50fc1392b9218cd8e26286a69" rel="noreferrer">diff</a>) (<a href="https://github.com/lguminski/elm-task-chain-and-port/tree/v2" rel="noreferrer">full source</a>):</p>

<pre><code>update message ({cells} as model) =
  case message of

    Push -&gt;
      let
        uid = List.length cells
      in
      ({ model
        | cells = [uid] ++ cells
      }, msgToCmd (OnCellAdded uid))

    OnCellAdded counter -&gt;
      (model, onCellAdded counter)

msgToCmd : msg -&gt; Cmd msg
msgToCmd msg =
      Task.perform identity identity (Task.succeed msg)
</code></pre>

<p>But still <code>OnCellAdded</code> gets processed right after <code>Push</code> without the model being rendered in-between.</p>

<p>My last attempt was using <a href="http://package.elm-lang.org/packages/ccapndave/elm-update-extra/2.0.0/Update-Extra#andThen" rel="noreferrer"><code>Update.andThen</code></a> (<a href="https://github.com/lguminski/elm-task-chain-and-port/commit/2451641fc26513ec718f2df2590e755d34bc315f" rel="noreferrer">diff</a>) (<a href="https://github.com/lguminski/elm-task-chain-and-port/tree/v3" rel="noreferrer">full source</a>)</p>

<pre><code>Push -&gt;
  let
    uid = List.length cells
  in
  ({ model
    | cells = [uid] ++ cells
  }, Cmd.none)
  |&gt; Update.andThen update (OnCellAdded uid)
</code></pre>

<p>Still it doesn't work. I need some help here.</p>