controllers send action context in ember.js

Question

Ember : 1.11.3

Ember Data : 1.0.0-beta.16

jQuery : 1.11.2

I'm trying to triger an action from a controller to another

Controller A is trying to trigger action on controller B:

A{
  needs: ['B'],
  actions: {
    foo: function(bar) {
      this.get('controllers.B').send('foo', bar);
    },
  }
}

B{
  actions: {
    foo: function(bar) {
      console.log("foo bar");
    },
  }
}

Tha tis working as intended, th eproblem comes when I have more controllers referenced:

A{
  needs: ['B'],
  actions: {
    foo: function(bar) {
      this.get('controllers.B').send('foo', bar);
    },
  }
}

B{
  needs: ['C'],
  name: null,
  init: function () {
    this.get('controllers.C').addObserver('name', this, function (sender) {
      this.set('name', sender.get('name'));
    });
  },
  actions: {
    foo: function(bar) {
      console.log("foo bar: " + name);
    },
  }
}

C{
  name: "hello from C",      
}

Now when I call B.foo(bar) I get :

foo bar: hello from C

When I call A.foo(bar), I get:

foo bar: null

when I put a breakpoint in the function, in the forst case, name is defined, in the second case (with C). name is null

I guess I have context issue but can't find out...

EDIT: context

I'am building a map application. I have a data controllers and views. I have then another view and controller in charge of drawing on the map. When I add data.

enter image description here

It's basically CRUD. When I click on the green item, I want to send an action to the drawing controller to tel him to add the item on the map.

What I want to do:

  //app/controllers/map-data.js
  actions: {
    positionItem: function(item) {
      this.get('draw').send('toggleDraw', 'Point');
    },
  }

  //app/controllers/map-draw.js
  actions: {
    toggleDraw: function (state) {
      this.set('mtgDrawState', state);
    },
  }

I'd like to keep drawing stuff in the map-draw controller and data stuff in the map-data controller as possible.

What I end up with (I cannot keep it like that)

  actions: {
    positionItem: function(item) {
      $('.map-draw-point').click();
    },

this is hard to do, because it's an antipattern. try to stay away from needs. are the controllers nested? bubble actions up. siblings? handle actions in the parent and send new data down. perhaps you could explain what you're trying to do. — Sam Selikoff
Ok, I've updated my question, if you like, I can point you to my web app later on — Alexandre Mélard
register the map with a common parent, and you can send actions in. samselikoff.com/blog/… — Sam Selikoff
Thank you for your comment Sam Selikoff, I'am rather new to allthe ember.js stuff, I've been working on it by myself for a few weeks. I am building an app for a dog training club I am part of. I would so much appreciate if you could give me some of your time getting me started with the component approach of ember.js I've put my code on github as it's all open sourced. github.com/mylen/mantrailling — Alexandre Mélard
If you care to take some time on this, you'll need to use a modify header extension in order to be able to see the maps, change the referer to demo.melard.fr — Alexandre Mélard

carter carter · Accepted Answer · 2015-04-24T20:22:52

B{
  needs: ['B'],
  name: null,
  init: function () {
    this.get('controllers.C').addObserver('name', this, function (sender) {
      this.set('name', sender.get('name'));
    });
  },
  actions: {
    foo: function(bar) {
      console.log("foo bar: " + name);
    },
  }
}

should be:

B{
  needs: ['C'],
  name: null,
  init: function () {
    this.get('controllers.C').addObserver('name', this, function (sender) {
      this.set('name', sender.get('name'));
    });
  },
  actions: {
    foo: function(bar) {
      console.log("foo bar: " + name);
    },
  }
}

controllers send action context in ember.js

1 Answers