CODEWITHSUNDEEP
javascriptember.jsember-router
brg
brg

Reputation: 3953

Emberjs controller target points to the wrong route

I have a student route and created a student controller for that route. In the route I have an action that I tried to trigger from the route using this.get('target') which for some unknown reason returns the index route which is the wrong route. So calling the action throws an error that says nothing handled the action. This is the jsfiddle 

App = Ember.Application.create();

App.Router.map(function(){ 
    this.route('student');
});

App.StudentRoute = Ember.Route.extend({
  
  actions: {
    
    callMe: function(){
      alert('hello');
    }
  }
});

App.StudentController = Ember.ObjectController.extend({
  
  actions: {
    sendtoRoute: function(){
      
      console.log('the route is:', this.get('target') );
    }
  } 
});
<script type="text/x-handlebars">
     {{render 'student'}}
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id='student'>
     <button {{action 'sendtoRoute'}} > hit me </buton>
  </script>

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
  
<script src="http://builds.emberjs.com/release/ember.js"></script>
  
 <script src="http://builds.emberjs.com/beta/ember-data.js"></script>

Upvotes: 0

Views: 230

Answers (2)

brg
brg

Reputation: 3953

I found the problem, it caused be using {{render 'student'}} to render the student template inside application template. To solve it I changed it to {{#link-to 'student'}} and the right route was called.

App = Ember.Application.create();

App.Router.map(function(){ 
    this.route('student');
});

App.StudentRoute = Ember.Route.extend({
  
  actions: {
    
    callMe: function(){
      alert('hello');
    }
  }
});

App.StudentController = Ember.ObjectController.extend({
  
  actions: {
    sendtoRoute: function(){
      
      console.log('the route is:', this.get('target') );
    }
  } 
});
<script type="text/x-handlebars">
     {{link-to 'Student' 'student'}}
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id='student'>
     <button {{action 'sendtoRoute'}} > hit me </buton>
  </script>

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
  
<script src="http://builds.emberjs.com/release/ember.js"></script>
  
 <script src="http://builds.emberjs.com/beta/ember-data.js"></script>

Upvotes: 1

Microfed
Microfed

Reputation: 2890

Actually, controller.get('target') points to the right context in your case. From Ember's docs on Ember.Controller.target:

It can also be set after a controller has been instantiated, for instance when using the render helper in a template, or when a controller is used as an itemController. In most cases the target property will automatically be set to the logical consumer of actions for the controller.

{{render 'student'}} is create StudentView with template 'student' and connects it to a new instance of StudentController, then render result to the parent's template (index in your case). It doesn't create/transit to StudentRoute, so there is no active instance of StudentRoute while client in IndexRoute. Thus, StudentController.target is pointing to parent context - ApplicationController.

Upvotes: 1

Related Questions