Visualization component of the view with parameters in the named output ember.js

Question

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

I came from the rails, so forgive my thoughts if this is not the case as ember does. You can specify yield :slider_area in the application template, and then wrap any content for this area in the content_for :slider_area . 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(' [e-mail] ') }); App.IndexRoute = Ember.Route.extend({ model: function() { return Ember.RSVP.hash({ sliders: this.store.find("slider") }); } }); 

Answer 1

So, I have a solution to this problem, instead of trying to transfer the view component in the template to a specific socket (ruby on the rails), the key is to create a template, not a component, and do it from the route to a specific socket.

When visualizing from a route, the slider template has access to all functions in the area of ​​the route controller, therefore we will distribute functions / arguments universally to all controllers that will use this template, and our dynamic parameters should work.

So, below in IndexRoute we define the data that we send to the controller, sliders , we also indicate that we want to display normal content in the default output line using this.render(); and then we create our common slider template in the named “slider” outlet. Then in our controller, we filter the model data according to our specification, and we call this function batterySliders by all the controllers that use this function.

app.js

 App.IndexController = Ember.ObjectController.extend({ batterySliders: function(){ return this.get('sliders').filterBy('page', 'index'); }.property(' [e-mail] ') }); 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>