Render view component with parameters into named outlet ember.js

Question

I have 2 named outlets in my application template, slider-area and pre-footer. Is there a way to pass view components that take parameters, as in the main-slider component shown in the index template, to a named outlet? So I would need to pass {{main-slider sliders=filteredSlider}} to the outlet {{outlet "slider-area"}} in the index template?

I have come from rails so forgive my thinking if this is not how ember does it. One could specify yield :slider_area in the application template and then wrap any content for this area in a content_for :slider_area block. Is a similar approach available in ember?

index.html

<script type="text/x-handlebars" data-template-name="application">
  {{panasonic-topbar}}
    <div id="batterywrap">
      {{outlet "slider-area"}}
        <div class="index_contents">
          <div class="index_contents_inner">
        <div class="main_area">
          {{outlet}}
        </div>
          </div>
       </div>
     </div>
  {{panasonic-footer}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  # Something like {{outlet "slider-area" render main-slider sliders="filteredSlider}} ?
  {{main-slider sliders=filteredSlider}}
  {{partial "social_footer"}}
</script>

app.js

App.IndexController = Ember.ObjectController.extend({
    filteredSlider: function(){
      return this.get('sliders').filterBy('page', 'index');
    }.property('[email protected]')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
      return Ember.RSVP.hash({ 
        sliders: this.store.find("slider")
      });
    }
});

dodgerogers747 dodgerogers747 · Accepted Answer · 2014-02-12T03:46:58

Ok, so I have a solution to this issue, rather than trying to pass a view component within a template to a specific outlet (the ruby on rails way), the key is to create a template, not a component, and render this from within the Route to the specific outlet.

When rendered from Route, the slider template has access to all of the functions in the scope of the Routes controller, so we namespace the functions/arguments universally across all controllers that will use this template and our dynamic parameters should work.

So below in the IndexRoute we define the data that we send to the controller, sliders, we also specify that we want to render normal content in the default outlet using this.render();, and then we render our shared slider template into the named outlet "slider-area". Then in our controller, we filter the models data to our specification and we name this function batterySliders across all controllers that use this feature.

app.js

App.IndexController = Ember.ObjectController.extend({
    batterySliders: function(){
        return this.get('sliders').filterBy('page', 'index');
    }.property('[email protected]')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({ 
            sliders: this.store.find("slider"),
        });
    },
    renderTemplate: function(){
        this.render();
        this.render("slider", {outlet: "slider-area"});
    }
});

index.html

<script type="text/x-handlebars" data-template-name="slider">
        {{panasonic-navigation tagName="div" classNames="gnavi_area"}}
        <div class="slider_wrap">
            <div id="slider" class="main_slider">
            {{#each slider in batterySliders}}
                <div class="slider_area slider0{{unbound slider.id}} {{unbound slider.background}}">
                    <div class="slider_inner">
                        <div class="inner0{{unbound slider.id}}">
                            <img {{bind-attr src="slider.image" alt="slider.image"}} class="nosp"/>
                            <img {{bind-attr src="slider.sm_image" alt="slider.sm_image"}} class="sp"/> 
                        </div>
                    </div>
                </div>  
            {{/each}}               
            </div>
        </div>
    </script>

application.html

<script type="text/x-handlebars" data-template-name="application">
    {{panasonic-topbar}}
    <div id="batterywrap">
        <div class="content_head">
            {{outlet "slider-area"}}
        </div>  
        <div class="index_contents">
            <div class="index_contents_inner">
                <div class="main_area">
                    {{outlet}}
                </div>
            </div>
        </div>
    </div>
    {{panasonic-footer}}
</script>

Render view component with parameters into named outlet ember.js

1 Answers