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

2
votes

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?

2
ember.jsroutingcomponentsrenderember-cli
Just to check, but you are exporting the route you have created, export default BoxModelRoute;, correct? Have you checked that renderTemplate is hit? - Oren Hizkiya
oh, yea i did the export. i'll edit. - Peter Kim

2 Answers

5
votes

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>
0
votes

Component extends a View, so similarly to the View components have a layoutName and templateName properties. You can use these properties to specify how to display your template. See here for an official description.

So, for example, your component can look as follows:

App.BoxModalComponent = Ember.Component.extend({
  layoutName: "box_modal",
  templateName: "box_modal_template"
});

And your layout and template can look as follows:

  <script type="text/x-handlebars" id="box_modal">
    <h2>Box Modal</h2>

    {{ yield }}
  </script>

 <script type="text/x-handlebars" id="box_modal_template">
  <h4>Inside Box Modal</h4>
 </script>

Working demo here

UPDATE

Also, if you are using a template that is expecting to render out some context that context will need to be passed into the component since component is isolated from your routes/controllers (as @Asgaroth points out in his answer).

See the following example for how to pass context => component => template http://emberjs.jsbin.com/baminu/2/edit