title: Render view component with parameters into named outlet ember.js
body: <p>I have 2 named outlets in my application template, <code>slider-area</code> and <code>pre-footer</code>. Is there a way to pass view components that take parameters, as in the <code>main-slider</code> component shown in the index template, to a named outlet? So I would need to pass <code>{{main-slider sliders=filteredSlider}}</code> to the outlet <code>{{outlet "slider-area"}}</code> in the index template? </p>
  
  <p>I have come from rails so forgive my thinking if this is not how ember does it. One could specify <code>yield :slider_area</code> in the application template and then wrap any content for this area in a <code>content_for :slider_area</code> block. Is a similar approach available in ember?</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
    {{panasonic-topbar}}
      &lt;div id="batterywrap"&gt;
        {{outlet "slider-area"}}
          &lt;div class="index_contents"&gt;
            &lt;div class="index_contents_inner"&gt;
          &lt;div class="main_area"&gt;
            {{outlet}}
          &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
    {{panasonic-footer}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="index"&gt;
    # Something like {{outlet "slider-area" render main-slider sliders="filteredSlider}} ?
    {{main-slider sliders=filteredSlider}}
    {{partial "social_footer"}}
  &lt;/script&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>App.IndexController = Ember.ObjectController.extend({
      filteredSlider: function(){
        return this.get('sliders').filterBy('page', 'index');
      }.property('sliders.@each.page')
  });
  
  App.IndexRoute = Ember.Route.extend({
      model: function() {
        return Ember.RSVP.hash({ 
          sliders: this.store.find("slider")
        });
      }
  });
  </code></pre>