CODEWITHSUNDEEP
javascriptember.jsoutlet
Andrew Shenstone
Andrew Shenstone

Reputation: 281

How do I render the new route of a child resource into the application sidebar outlet?

My project is ember.js using ember-cli and ES6 import methods.

This question is about rendering the new route for the child resource dataset into the application {{ outlet 'sidebar' }} while other routes on dataset (show) render into {{ outlet 'main' }}

application.hbs 

<div class="col-xs-8">
  Outlet Main
  {{liquid-outlet "main"}}
</div>
<div class="col-xs-4">
  Outlet Sidebar
 {{liquid-outlet "sidebar"}}
</div>

router.js

this.resource('organizations', function() {
    this.route('new');
    this.resource('organization', { path: '/:organization_id' }, function() {
      this.route('edit');
      this.resource('datasets', function() {
        this.route('new');
        this.resource('dataset', { path: '/:dataset_id' }, function() {
          this.route('edit');
        });
      });
    });
  });

routes/organization.js: 

import Ember from 'ember';

export default Ember.Route.extend({
  renderTemplate: function() {
    //render into application so organizations template doesn't show
    this.render('organization', {
      into: 'application',
      outlet: 'main',
      controller: 'organization'
    });
    // **** Not working but roughly what I want to do
    this.render('organization.datasets.new', {
      into: 'application',
      outlet: 'sidebar',
      controller: 'organization.datasets.new'
    });
    // ******
  }
});

Currently I get this error when attempting this code:

Error while processing route: types.index You passed `controller: 'organization.datasets.new'` into the `render` method, but no such controller could be found. Error: You passed `controller: 'organization.datasets.new'` into the `render` method, but no such controller could be found.

My understanding is that any child resource routes should be determined in the parents route. True? How do I get ember to recognize the controller? I'm guessing my syntax is wrong... Thanks for the help.

Upvotes: 1

Views: 38

Answers (2)

Andrew Shenstone
Andrew Shenstone

Reputation: 281

In terms of pure syntax, what I was doing wrong is specifying organization.datasets.new rather than just datasets.new. The this.resources creates a new namespace so you don't need to specify organization. Turns out this.resource is being deprecated in favor of this.route anyways.

As far as actually doing what I want to do, I'm going to have to flatten my routes. Will post better answer when I figure out a flat hierarchy that works the way I want.

Upvotes: 0

Raul Souza Lima
Raul Souza Lima

Reputation: 51

Have you tried this?

this.render('organization/datasets/new', {
  into: 'application',
  outlet: 'sidebar',
  controller: 'organization/datasets/new'
});

Use "/" instead of ".".

Upvotes: 0

Related Questions