title: Ember.Component (block form): more than one outlet {{yield}}
body: <p>I see that ember has a very nice mechanism for wrapping content in a component using the <code>{{yield}}</code> mechanism documented <a href="https://guides.emberjs.com/release/components/wrapping-content-in-a-component/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>So, to use the example in the documentation, I can have a <code>blog-post</code> component template defined like so:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" id="components/blog-post"&gt;
    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;div class="body"&gt;{{yield}}&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I can then embed <code>blog-post</code> into any other template using the form:</p>
  
  <pre><code>{{#blog-post title=title}}
    &lt;p class="author"&gt;by {{author}}&lt;/p&gt;
    {{body}}
  {{/blog-post}} 
  </code></pre>
  
  <p>My question is, can I specify two different <code>{{yield}}</code> outlets in the components template? </p>
  
  <p>Something like this is possible via <a href="https://guides.emberjs.com/release/routing/rendering-a-template/" rel="nofollow noreferrer">Named Outlets</a> in <code>Ember.Route#renderTemplate</code> like so:</p>
  
  <p><em>Handlebars</em>:</p>
  
  <pre><code>&lt;div class="toolbar"&gt;{{outlet toolbar}}&lt;/div&gt;
  &lt;div class="sidebar"&gt;{{outlet sidebar}}&lt;/div&gt;
  </code></pre>
  
  <p><em>JavaScript</em>:</p>
  
  <pre><code>App.PostsRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render({ outlet: 'sidebar' });
    }
  });
  </code></pre>
  
  <p>I'm not sure I can take this path for a component which will not know what route's template would be rendering it.</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <hr>
  
  <p>For the sake of clarity, I'm trying to implement the Android <a href="https://stackoverflow.com/questions/20776278/javascript-swipe-for-action-pattern-implementation">Swipe for Action Pattern</a> as an Ember component. </p>
  
  <p>So, I'd like users of this component to be able to specify two different templates:</p>
  
  <ol>
  <li>A template for the normal list item, and</li>
  <li>A template for the actions that are revealed when a swipe on (1) is detected. </li>
  </ol>
  
  <p>I want to make this into a component, because quite a lot of javascript goes into handling the touch(start/move/end) events, while still managing <a href="https://stackoverflow.com/questions/7069458/prevent-touchstart-when-swiping">smooth touch based scrolling</a> of the list. Users would supply the two templates and this component would manage handling of touch events and necessary animations.</p>
  
  <p>I've managed to get the component working in the block form, where the block's contents are treated like (1). The second template (2) is specified through a parameter (<code>actionPartial</code> below) which is the name of a <a href="http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-partial-code-helper" rel="nofollow noreferrer">partial</a> template for the actions:</p>
  
  <p><em>Component Handlebars Template: sfa-item.handlebars</em></p>
  
  <pre><code>&lt;div {{bind-attr class=":sfa-item-actions shouldRevealActions:show" }}&gt;
      {{partial actionPartial}}
  &lt;/div&gt;
  
  &lt;div {{bind-attr class=":sfa-item-details isDragging:dragging shouldRevealActions:moveout"}}&gt;
      {{yield}}
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Calling Handlebars Template:</em></p>
  
  <pre><code>{{#each response in controller}}
      &lt;div class="list-group-item sf-mr-item"&gt;
          {{#sfa-item actionPartial="mr-item-action"}}
              &lt;h5&gt;{{response.name}}&lt;/h5&gt;
          {{/sfa-item}}
      &lt;/div&gt;
  {{/each}}
  </code></pre>
  
  <p>Where the <code>mr-item-action</code> handlebars is defined like so:</p>
  
  <p><em>mr-item-action.handlebars</em>:</p>
  
  <pre><code>&lt;div class="sf-mr-item-action"&gt;
      &lt;button class="btn btn-lg btn-primary" {{action 'sfaClickedAction'}}&gt;Edit&lt;/button&gt;
      &lt;button class="btn btn-lg btn-primary"&gt;Delete&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is, actions from the user supplied partial, <code>sfaClickedAction</code> above, are not bubbled up from the component. A fact which is mentioned in the <a href="http://emberjs.com/guides/components/handling-user-interaction-with-actions/" rel="nofollow noreferrer">docs</a> in para 4.</p>
  
  <p>So, now I do not know how a user could capture actions that he defined in the supplied actions template. A component cannot catch those actions because it doesn't know about them either.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <hr>
  
  <p>I sprung a follow up question <a href="https://stackoverflow.com/questions/20988532/catch-all-action-handler">here</a></p>