Having troubling binding a property on a parent controller

Question

I have parent controller and a child controller setup so that the child controller can toggle a property from the parent controller.

When I toggle the property from the Child Controller, it successfully updates the child view and triggers the "onlineChanged" observer and logs the appropriate value, but the parent view doesn't update with the correct value. The display remains false.

Here are is my code:

App.Router.map(function() {
    this.resource('Main', function() {});
});

App.MainController = Ember.Controller.extend({
    online: false

    onlineChanged: function () {
        console.log(this.get('online'));
    }.observes('online')
});

App.MainIndexController = Ember.Controller.extend({
    needs: ['Main'],
    actions: {
        toggleOnline: function() {
            this.toggleProperty('controllers.Main.online');
        }
    }
});

And my templates;

Main.hbs

{{outlet}}

Online: {{online}}

Index.hbs

<button {{action toggleOnline}}>toggle</button>

Why is it that the console logs the appropriate value, but Main.hbs doesn't update correctly?

Answer 1

Main should be lowercase in your toggle property, needs, and map. I'm not positive why that would break it though.

Additionally a comma is missing in your main code, so I assume you've ripped out some other logic that could be breaking it.

http://emberjs.jsbin.com/EKepEMaD/1/edit