CODEWITHSUNDEEP
ember.js
jimcode
jimcode

Reputation: 171

ember.js transition to route from within child view & controller

I have a template that is being rendered automatically from the route. The handlebar template specifies a child view.

The child view has an extended View in my js which specifies a controller to use. It also has a click handler that raises an event. The controller handles the event.

Up to that point this works - the problem is that the controller tries to call...

this.transitionToRoute("about")

and for some reason that doesn't work.

I also handle a click event on the main view and use that exact same method in it's controller and that DOES work. So what is the difference? and what can I do instead to handle the transition?

Example: http://jsfiddle.net/b6xsk/4/

In the example you can see the click on the Index works while the click on the Child View doesn't.

The code below matches the fiddle.

My templates...

<script type="text/x-handlebars">
    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}
  <div class="app-template">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Index (click me)</h1>
    {{view App.ChildView}}
</script>

<script type="text/x-handlebars" data-template-name="about">
    <h1>About</h1>
</script>

<script type="text/x-handlebars" data-template-name="childview">
    <h2>Child View (click me)</h2>
</script>

And then my JS...

App = Ember.Application.create();

// two simple routes
App.Router.map(function() {
  this.route("index");
  this.route("about");
});

// index controller handles event and moves to about route
App.IndexController = Ember.Controller.extend({
    useraction: function(event) {
        console.log("User Action");
        this.transitionToRoute("about"); // works !
    }
});

// index view handles the click and raises event (handled by controller)
App.IndexView = Ember.View.extend({
    click: function(event) {
        this.get('controller').send('useraction', event);        
    }
});

// handles child event and tries (but fails) to transition to about route
App.ChildViewController = Ember.Controller.extend({
    childuseraction: function(event) {
        console.log("Child User Action");

        // do some validation or other code and maybe then transition 
        // in this example always transition

        this.transitionToRoute("about"); // doesn't work !  why??

        event.stopPropagation(); // don't allow the event to bubble
    }
});

// instantiated so we can attach to view below
App.childViewController = App.ChildViewController.create();

// child view is added in the index handlebar template and raises 
// event on click that is handled by child view controller
App.ChildView = Ember.View.extend({
    templateName: 'childview',
    controller: App.childViewController,
    click: function(event) {
        this.get('controller').send('childuseraction', event);
    }
});

Upvotes: 3

Views: 4530

Answers (1)

Thomas
Thomas

Reputation: 1321

The difference is the indexController has a reference to the application router, but the childViewController you created does not have a reference to said router. You should have Ember create the controller for you, which you can do as follows.

Remove the childController creation and the controller specification in ChildView.

Add the following to your IndexController

needs: ['childView'] // Can be a string if you only need one other controller

This will have Ember create the controller for you, and add it to the controllers collection of indexController. You can then specify a controllerBinding in your index template as follows.

{{view App.ChildView controllerBinding="controllers.childView"}}

A more detailed explanation can be found here Managing dependencies between controllers and here darthdeus vs Ember.js: Controller's Needs Explained

Upvotes: 4

Related Questions