Ember.js: when using {{action}}, how to target a specific controller?

Question

I put my question in a code example here:

http://jsbin.com/urukil/12/edit

See, I can use a {{action}} (which is placed in a child view) with target option to trigger an event in ApplicationView or ApplicationController or ChildView, only except the ChildController which is the one I truly wanted.

According the document, if no target specified, the event itself should handled in corresponding controller, in my case, which is should be ChildController. But why this action always lookup in ApplicationController? Did I miss something obviously important?

Answer 1

You can use needs to call a action on different controller...

 App.ApplicationController = Ember.Controller.extend({
  needs: ['child'],
  doSomething: function() {
  alert("From ApplicationController");
  }
});

And the target can be specified as "controllers.child" from the template

<p {{action doSomething target="controllers.child"}}>Blah blah</p>

Here is your working fiddle...

http://jsbin.com/agusen/1/edit

Answer 2

Use this.controllerFor('') to call different controller event. A working example is given below.

JS:

/// <reference path="Lib/ember.js" />
var app = Ember.Application.create()
app.Router.map(function () {
    this.resource('post')

});
app.ApplicationRoute = Ember.Route.extend({

    model: function () { 
        return { "firstName": "amit", "lastName": "pandey" }
    }
});
app.ApplicationController = Ember.ObjectController.extend({
    Address: "House no 93-B",
    fullName: function () {
        return this.get("model.firstName") + " " + this.get("model.lastName")
    }.property("model.firstName", "model.lastName"),
    actions: {
        submit: function (name) {

            this.controllerFor('post').send('handleclick')

        },
        makeMeUpper:function()
        {
            alert('calling application controller Event');
           this.set("model.firstName",this.get("model.firstName").toUpperCase())
        }


    }



});


app.PostRoute = Ember.Route.extend({
    model:function()
    {
        return user;


    }


});
app.PostController = Ember.ObjectController.extend({
    Hello: "afa",
    handleclick: function ()
    {
        alert('calling post controller Event');

        this.controllerFor('application').send('makeMeUpper');
    }


});


var user = [
    {
        id: "1",
        Name: "sushil "

    },
    {
        id: "2",
        Name: "amit"

    }

];

//hbs

 <script type="text/x-handlebars">
      <button {{action submit firstName}}>CLICK HERE TO CALL Post controller event</button>
       {{input type="text" action= "makeMeUpper" value=firstName }}     

       {{#if check}}
      No Record Exist

       {{else}}
       {{firstName}}{{lastName}}
       {{/if}}
       {{#linkTo 'post'}}click {{/linkTo}}
       {{outlet}}
   </script>
        <script type="text/x-handlebars" id="post">

            <button {{action hanleclick}}>Click here to call application controller event</button>
        </script>