Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

new ember.js routing: how to connect outlets?

I'm confused how to connect outlets with the new router approach.

index.html:

...
<script type="text/x-handlebars" data-template-name="application">
  <h4>The application handelbar</h4>
  {{! outlet 1}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h4>The index handelbar</h4>
  {{! outlet 2 and 3}}
  {{outlet nav}}
  {{outlet main}}
</script>

<script type="text/x-handlebars" data-template-name="main">
  <h4>The main handelbar</h4>
</script>

<script type="text/x-handlebars" data-template-name="nav">
  <h4>The nav handelbar</h4>
</script>
...

app.js:

...
App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});

App.IndexController = Ember.Controller.extend({
});

App.IndexView = Ember.View.extend({
  templateName: 'index'
});
...

This code renders outlet-1.

Questions:

  • Why is outlet-1 rendered? How are outlet-1 and "index" connected?
  • How can I connect outlet 2 and 3 to the same "index" site?

Thanks
miw

like image 656
user1984778 Avatar asked Jan 16 '13 19:01

user1984778


People also ask

What is outlet in Ember JS?

Here is the explanation: {{outlet}} -> This will provide a stub/hook/point into which you can render Components(Controller + View). One would use this with the render method of routes. In your case you will likely have a details route which could look like this.

How to generate route in Ember?

Basic Routes. The map() method of your Ember application's router can be invoked to define URL mappings. When calling map() , you should pass a function that will be invoked with the value this set to an object which you can use to create routes.

How does Ember routing work?

It can render a template. It can load a model that is then available to the template. It can redirect to a new route, such as if the user isn't allowed to visit that part of the app. It can handle actions that involve changing a model or transitioning to a new route.

What is an Ember controller?

In Ember. js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server.


2 Answers

You need to specify this stuff in a route handler, using the renderTemplate method (or renderTemplates method, depending on your build).

What you're not seeing is that Ember is setting quite a few defaults for you already. In fact, the defaults set by Ember have allowed you to omit the entire route handler.

App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});
App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render(); 
     /* this is the default, it will basically render the
        default template, in this case 'index', into the 
        application template, into the main outlet (i.e. your 
        outlet 1), and set the controller to be IndexController.
     */

  }
});

What you want is to render additional templates in the renderTemplate function, likeso:

  renderTemplate: function() {
     this.render("index"); 
     // this renders the index template into the primary unnamed outlet. 
     this.render("navtemplate", {outlet: "nav"}); 
     // this renders the navtemplate into the outlet named 'nav'.
     this.render("main", {outlet: "main"});
     // this renders the main template into the outlet named 'main'.
  }

Hope this helps.

like image 174
Han Avatar answered Oct 03 '22 00:10

Han


Ember automatically assumes / matches with IndexRoute, IndexController and IndexView. This is in the ember routing guide

To connect nested routes you can do it like this:

App.OtherRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render('otherTemplate', {
      into: 'index',
      outlet: 'nav'
     }); 
  }
});

Here is a more in depth answer from another question.

like image 45
miketownsend Avatar answered Oct 03 '22 01:10

miketownsend