CODEWITHSUNDEEP
ember.jsember-router
Andreas Köberle
Andreas Köberle

Reputation: 111092

Ember Router and Controller

I try to get the example from the Ember Guide to work but I dont get it:

window.App = Ember.Application.create()

App.Router.map ->
  this.route("about");
  this.route("favorites", { path: "/favs" })

App.IndexRoute = Ember.Route.extend({
  setupController: (controller) ->
    controller.set('title', "My App")
});

Template:

<h1>{{title}}</h1>
<nav>
  {{#linkTo "index"}}Index{{/linkTo}}
  {{#linkTo "about"}}About{{/linkTo}}
  {{#linkTo "favorites"}}Favorites{{/linkTo}}
</nav>

As I understand the example it should display the title when I reach the index page, but nothing happens. So could some see whats wrong here.

Upvotes: 0

Views: 102

Answers (2)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

You are setting the title property in the IndexController, but it seems like your template is not the index template but rather the application template. You can change your IndexRoute to use controllerFor so you can access the ApplicationController (auto generated) and set a value to the property, similar to this:

App.IndexRoute = Ember.Route.extend
  setupController: (controller) ->
    @controllerFor('application').set('title', 'My App')

(see fiddle)

Or you can do it directly in the ApplicationRoute:

App.ApplicationRoute = Ember.Route.extend
  setupController: (controller, model) ->
    controller.set('title', 'My App')

(see fiddle)

Upvotes: 1

Andreas K&#246;berle
Andreas K&#246;berle

Reputation: 111092

Ok the this small sentence seems to be important here:

The IndexController is the starting context for the index template

So the {{title}} has to be in the index template:

script(type="text/x-handlebars")

    <nav>
    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}
    {{#linkTo "favorites"}}Favorites{{/linkTo}}
    </nav>
    {{outlet}}

script(type="text/x-handlebars", data-template-name="index")
    <h1>{{title}}</h1>

Upvotes: 0

Related Questions