CODEWITHSUNDEEP
ember.js
nightire
nightire

Reputation: 1371

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

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?

Upvotes: 10

Views: 10657

Answers (4)

IAMZERG
IAMZERG

Reputation: 100

Since controllerFor is getting deprecated, the correct way to do this now is to specify needs in the controller, retrieve it from the controllers list, and then send it there. Example:

App.SomeController = Em.Controller.extend({
  needs: ['other'],
  actions: {
    sayHello: function () {
    console.log("Hello from inside SomeController.");
    this.get('controllers.other').send('helloAgain');
    }
  }
});

App.OtherController = Em.Controller.extend({
  actions: {
    helloAgain: function () {
      console.log("Hello again from inside OtherController!");
    }
  }

});

EDIT: oops... Looks like someone already posted this answer in essence. Will revise if needed.

Upvotes: 0

sushil pandey
sushil pandey

Reputation: 762

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>

Upvotes: 7

selvagsz
selvagsz

Reputation: 3872

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

Upvotes: 18

kevinml
kevinml

Reputation: 21

As far as I know the view class does not change the current controller. Since you are calling the view from the Application template, it remains in the ApplicationController.

Emberjs.com guides on render:

{{render}} does several things:

When no model is provided it gets the singleton instance of the corresponding controller

Simply changing your code from a view to a render call seems to do the trick:

Trigger ApplicationController
</p>
{{render 'child'}}

Upvotes: 0

Related Questions