Ember.js: Getting Error: You attempted to render into '" + into + "' but it was not found"

[drobannx]

Running into an issue since upgrading to 1.11 regarding code that changed when using this.render from a route. I'm using the ember-modals addon which makes a call to this.render from a route with a template name and some options specifying how to render the template. The issue is that appendOrphan gets called when using this.render. It seems like appendOrphan expects a call to be made to impersonateAnOutlet which would set the wasUsed value. But it looks like impersonateAnOutlet only gets called when using the {{render}} helper.

[trek]

I believe there is a duplicate issue regarding this. Can you check for us?

[drobannx]

I've seen some other issues that are related but I didn't find anything exactly the same. Issues #10760 and #10602 seemed related to what is going on here.

[drobannx]

I believe I've recreated the issue in a couple jsbins.

Ember 1.10: http://jsbin.com/zoxape/4/edit?html,js,output
Ember 1.11: http://jsbin.com/bohoge/3/edit?html,js,output

[dukex]

I'm getting the same error :/

[rwjblue]

@drobannx - Can you update the JSBin for 2.0.0, and confirm this is still an issue?

[drobannx]

@rwjblue I've made a 2.0.0 bin, and I still get the issue.

Ember 1.10.0: http://jsbin.com/zoxape/4/edit?html,js,output (working)
Ember 2.0.0: http://jsbin.com/wifuquzovo/edit?html,js,output (get the error)

[akozhemiakin]

I can confirm that this pretty annoying bug is still here in Ember 2.3.1.
With this bug still alive I can not find an easy and clean way to render things into some alternative layout (other then application.hbs)

[dzbo]

I'm having same problem on Ember 2.3.1. I'm using pod structure for my app.

Update: Okay I've made that working with a bit of workaround. I'm calling render in mixin attached to application route (it's for showing modal content). When I tried to render same template in some custom route then I had the error. My fix was to attach the mixin to this route, so now action is not bubbling to application route where it was failing. Althought it works now I still see error in console.

[SeyZ]

+1 exactly the same bug on 2.3.0.

[iAchilles]

+1 2.4.1

[xaqq]

Hello,

It seems this bug is almost 1y old. Since it seems it's not going to be fixed any time soon, is there any workaround ?

My use case is to render some route in an other layout than application. For example the login page, as it is rather independent wrt to the rest of the application.

This is my renderTemplate() overload code:

this.render('login', {
      into: 'unauthenticated'
});

I have an unauthenticated.hbs file in the templates directory, so I think I'm not doing anything wrong.

Please advise.

Thanks

[akozhemiakin]

As for me I use pretty dirty warkaround: I have scrpit that conpletely
removes any surrounding layout when activated. Yes, I know it's very dirty
but at least it works.

[xaqq]

I actually introduced a my-body component that is rendered inside application.hbs.
The my-body component makes use of a service to remove the layout (using {{#if}}) when required.

It seems similar to what you are doing, but sadly feels rather hacky. At least it works.

[vzhukovsky]

Could someone provide an example of fix?( using jsbin or something else)

[xaqq]

Bump.

The issue is still present on 2.7 beta.

[meteormanaged]

Checking in from 2.7 release.

[kevingelion]

Having this issue on 2.4.0

[denniscastro]

I have the same problem

here is my twiddle

https://ember-twiddle.com/5545ecd06bb4e876a9e16644396814aa

/show2 works with application.hbs perfect
/show1 must render in newLayout.hbs (without application.hbs), doest work

[ef4]

For people who are wondering why this bug is still open: this bug has lingered at low priority because only a small minority of apps use into, and only a small minority of those attempt to do it at the top level, and none of the people working on those apps have stepped forward to fix it.

I would have killed into entirely at 2.0 if I could have -- it survived only because nobody had the time to properly deprecate and remove it. Instead we were able to keep it working, but there have always been rough edge cases and it was hard to keep 100% of them the same as the implementation changed. Each time we have poked this code again we break a different subset of rarely-used edge cases.

Just stop using into. It dates from a time when Ember had neither components nor services. Anything it can do can be done better with components and services.

For rendering to modals and sidebars, see https://github.com/ef4/ember-elsewhere

For trying to not show the application.hbs template sometimes: don't do that, you're abusing the meaning of application.hbs. It is literally supposed to be the template that is _always present_. Move your sometimes-present content into a child route below it (and remember that routes can have {path: '/' }, meaning your URL structure is unrelated to this change).

[neilor]

This issue is still present on 2.10.0 release!

[janwerkhoven]

We replaced all {{outlet 'custom'}} with {{component componentName}} and never looked back. You can set this component helper from the route with a service. No need for this.render({ into: 'custom' }.

https://www.emberjs.com/api/classes/Ember.Templates.helpers.html#method_component

[halleyrv]

Hi janwerkhoven

Can you explain how implemented this solutions?

[janwerkhoven]

Our app relies on series of modals being shown on top of a page. To manage we would render the page in the {{outlet}} and the modals in {{outlet 'modal'}}.

// templates/application.hbs

{{outlet}}
{{outlet 'modal`}}

Our parent route /parent would render a template in {{outlet}} as you do normally and it's child routes parent/some-modal would then use this.render() to set a template in the {{outlet 'modal'}}.

 // routes/parent/some-modal

  renderTemplate: function() {
    this.render('parent/some-modal', {
      into: 'application',
      outlet: 'modal'
    });
  },

That has worked for us for 2 years until now we are refactoring bits and start hitting this enigmatic You attempted to render into '" + into + "' but it was not found" error. It would work for 4/5 of our routes, but not the others? After reading @ef4 comment helped us understand it's a legacy technique better resolved with services and components. So we came up with something like this instead:

// routes/parent/some-modal

export default Ember.Route.extend({
  modals: inject.service(),
  afterModel() {
    this.set('modals.componentName', 'some-modal-component-name');
  }
});

// services/modals.js

componentName: null,



md5-1dd92455bd822ef73b5233a30657586f



// components/modal-wrapper/component.js

modals: inject.service(),
componentName: computed('modals.componentName', function() {
  return this.get('modals.componentName');
}),



md5-1dd92455bd822ef73b5233a30657586f



// templates/application.hbs

{{outlet}}
{{modal-wrapper}}
  {{component componentName}}
{{/modal-wrapper}}

The beauty about this is that ever step along the way, the route, the service, the component, all of them are now easier to write tests for. Works like a charm :)

[halleyrv]

janwerkhoven I would like to use something similar like ruby ​​on rails
Design "name_layout" for ember
What I want to do is that just for the login path do not load my application.hbs template. Currently I can not do this since the login is loaded inside this one.

What you put me do not understand how I can use for what I want, could you help me if possible?

[ef4]

@halleyrv The meaning of application.hbs is "things that should always be on the page". If you only want them sometimes, then don't put them in application.hbs. This is the source of your confusion.

Move the things you have in application.hbs to something like logged-in.hbs instead, and use a route structure like:

this.route('login');
this.route('logged-in', { path: '/' }, function() {
  // all your other routes go here                         
});

[halleyrv]

Hi @ef4

I use
Thanks for the prompt response. Use what you indicated and my login no longer has an application design but now when I enter my desktop path while loading with a different design in this case the friend does not show any content written in dashboard.hbs because this happens ? You could help me these children my codes

/app/router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.resource('login');

  this.route('amigo',{ path: '/' }, function() {
  // all your other routes go here
   this.route('dashboard');

  });

});
export default Router;

This is my app/application.hbs

{{outlet}}

this is my amigo.hbs where are the new design for the templates.

<!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>


    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">Servicios Generales para el Hogar</div>
            <div class="right">
              <!-- 
                Right link contains only icon - additional "icon-only" class
                Additional "open-panel" class tells app to open panel when we click on this link
              -->

            </div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">


             {{outlet}}
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
      <div class="toolbar">

        </div>  
      </div>
    </div>

This is my dashboard.hbs
Hi this message not show when i access to route dashboard {{outlet}}

[kumkanillam]

@halleyrv You need to move route and controller and template correspondingly.
for /dashboard route, in your case,
app/routes/amigo/dashboard.js
app/templates/amigo/dashboard.hbs
if you have controller then it should go to app/controllers/amigo/dashboard.js.

[halleyrv]

Thanks a lot @kumkanillam and @ef4 and @janwerkhoven

I could solve it, i will place the Solution now for multi template layout in ember for other user For other users who have this problem.

If I want my login template to have a different template and all other routes inherit from another template than the login template, here are the steps:

First

in your app/router.js create

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('login');

  this.route('layoutapp',{path: '/'}, function() {
    this.route('welcome');
  });
});

export default Router;

where layoutapp is where i put the new template for other route , it is important the path: '/' To tell you which routes to take from the root.

Then inside the same directory where the application.hbs file is.

I create a file called layoutapp.hbs. This is important since this will be the template file for the other routes.

So I create layoutapp with same name the route layoutap. Now i put the content for this template.

app/templates/layoutapp.hbs

<!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>


    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">Servicios Generales para el Hogar a</div>
            <div class="right">
              <!-- 
                Right link contains only icon - additional "icon-only" class
                Additional "open-panel" class tells app to open panel when we click on this link
              -->

            </div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">


             {{outlet}}
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
      <div class="toolbar">

        </div>  
      </div>
    </div>

So in the application.hbs i put this online
{{outlet}}

The route login inherit template from application.hbs and the other routes example welcome inherit template from layoutapp.

[btecu]

This issue can be closed since into was removed from Ember 3.0.

https://www.emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet