Search code examples
bindingember.jscontrollers

Emberjs controller needs with Binding


I have nested resources:

    this.resource('foo', {path: '/foo/:foo_id'}, function() {
        this.route('makesomethingwithfoo');

        this.resource('bar', {path: 'bar/:bar_id'}, function() {
            this.route('makesomethingwithbar');

I want to use some properties from the model foo in, while I'm in #/foo/321421/bar/231421. My BarIndexController looks like this:

   ... = Ember.ObjectController.extend({
    needs:'fooIndex',
    //myBinding: 'controllers.fooIndex',
    ....});

In my template if I use controllers.fooIndex.desiredProperty I can access the property of model foo. I wanted to use myBinding in order to spare writing a few characters more ( controllers.fooIndex). I think I did everything right, at least it seems right according to the documentation. I get this error:

     Uncaught Error: assertion failed: Cannot delegate set('my', <(subclass of 
     Ember.ObjectController):ember238>) to the 'content' property of object proxy
     <(subclass of Ember.ObjectController):ember249>: its 'content' is undefined 

Solution

  • The controller that has the model is foo. The fooIndex route is an implicit nested route of the foo route, and hence has a controller of it's own. The nested FooIndexController also needs to lookup the model on it's parent routes as needed.

    In this case your bar route needs to use foo instead of fooIndex in the needs declaration.

    needs:'foo',
    fooBinding: 'controllers.foo'
    

    The fooBinding is optional. It shortens the lookup to this.get('foo'). You might also want to refer to this answer to help clarify nested resources in Ember.