Ember.js - how to render default outlet in a component view

Question

I have a reused component view called 'box-modal.js' in /app/templates/components/box-modal.js. It contains an outlet in which I want to render a default template.

<div>
  {{outlet main}}
</div>

The template I want to render as default in the outlet is in /app/templates/default_box.hbs

I know that you can use renderTemplate function in a router file for regular templates but it's not working for component templates:

/app/routes/components/box-modal.js

import Ember from "ember";

var BoxModalRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('default_box', {
      into: 'components.box-modal',
      outlet: 'main'
    });
}
export default BoxModalRoute;

Is there a standardized way for template rendering in component views in Ember-cli?

Answer 1

A component should be an isolated thing in your application, so idealy it should not have access, or depend on external things.

What you can do is use your component to wrap the template.

<div class="modal-component">
  {{yield}}
</div>

And then wrap your template in the component.

{{#box-modal}}
  {{partial "default_box"}}
{{/box-modal}}

To be used as partial your template name should start with underscore /app/templates/_default_box.hbs

Would generate

<div class="modal-component">
  <whatever is in /app/templates/_default_box.hbs />
</div>