title: Encapsulating nested component port communication in Elm?
body: <p>I have a reusable Elm component that is intended to be reused in multiple places (in the style of the <a href="http://guide.elm-lang.org/architecture/modularity/counter_pair.html">guide tutorial</a>. I have a Javascript function that I would like to communicate with via ports, but creating a port subscription causes every "instance" of my component to receive every message that I send back from Javascript.</p>
  
  <p>Ideally, parent components should not need to do any filtering beyond the usual <code>Cmd.map ChildMsg</code>. The simplest solution I can come up with is to add an ID to each child model and filter in the child's own update function, but this is a bit unfortunate, and requires me to fabricate an ID if one doesn't already exist.</p>
  
  <p>As an example of my ideal result, the <code>Http</code> modules allows you to return a task and receive the result back, addressed only to the specific instance that requested it. I've managed to emulate this behavior with a simplistic <code>Native</code> module: <a href="https://github.com/tgecho/elm-custom-task-example">https://github.com/tgecho/elm-custom-task-example</a></p>
  
  <pre><code>function getNumber(number) {
      return _elm_lang$core$Native_Scheduler.nativeBinding(function(callback) {
              return callback(_elm_lang$core$Native_Scheduler.succeed(number));
      });
  }
  </code></pre>
  
  <p>Then my component can call this function by returning a task <code>Task.perform NaN Increment (Number.getNumber 1)</code> and will receive the result back as an Increment message.</p>
  
  <p>What am I missing? Is there a way to encapsulate port communication <strong>without writing Native</strong> code or adding IDs to everything?</p>