Accessing scope inside ArrayController/others #630

Closed
mediastuttgart opened this Issue Mar 29, 2012 · 6 comments

Comments

Projects
None yet
3 participants

Documentation and examples on the web is still rare, so sorry for asking here.

// Create app object
var App;

// Create application
App = Ember.Application.create();

// Create components
App.Controller = Ember.Object.extend();

// Display controller
App.Controller.Display = Ember.ArrayController.create({
    // Init
    init : function () {
            // Preserve scope?
            var that = this; ///> Or: how to access <App.Controller.Display>?

            // Preserves the scope to our ArrayController
            this.addObserver('onresize', function () {
                    Ember.Logger.log(this); ///> <Ember.ArrayController:ember150>
            });

            // Looses the scope to our ArrayController
            $(window).bind('resize', function () {
                    Ember.Logger.log(this);                   ///> Window Ember develop
                    Ember.Logger.log(that);                   ///> <Ember.ArrayController:ember150>
                    Ember.Logger.log(App.Controller.Display); ///> App is not defined

                    // Ember.methodToAccess(App.Controller.Display)
                    // or preserve the scope like shown above (that)?
                    // or can observers/listeners be bound to window events?
            });
    }
});

Hit me, when i'm a logical idiot.

Owner

wagenet commented Mar 29, 2012

Can I ask why you're using addObserver vs just calling observes on a property function?

Good question. I'm currently trying to get into depth with Ember and discover how things work (ideal case).

Actually i want to create a controller with a function to listen for window.onresize. Next i want to store this.set('windowWidth', $(window).width() inside the controller and finally notify other controllers which need to know the window dimensions (a slideshow for e.g.)

// Preserve scope?
var that = this; ///> Or: how to access <App.Controller.Display>?

// Preserves the scope to our ArrayController
this.addObserver('windowWidth', function () {
        // notify others - or other controllers can
        // access (App.Controller.Display.get('windowWidth'))?
        Ember.Logger.log(this.get('windowWidth'));
});

// Looses the scope to our ArrayController
$(window).bind('resize', function () {
        that.set('windowWidth', $(window).width());
});

// Or something like
this.addListener('window', 'onresize', function () {
        Ember.Logger.log(this);
});

I know the code is kinda nonsense (just testing). So the real question is "how to access a controller from another one (or from a function inside a controller without loosing scope)" and "how to notify other controllers about changes"

Owner

dgeb commented Mar 29, 2012

@mediastuttgart if you have general usage questions, please ask them at StackOverflow tagged with 'emberjs'. Questions like this are typically answered within a day, and often within hours. The Github issue tracker is used primarily for bugs and feature requests.

For this particular scenario, the typical pattern is to use observes as @wagenet suggests. Andy Matthews wrote a blog post about observes.

I see from your fiddle that you aren't correctly instantiating Ember.Object (using new instead of create). Please check out my post covering the basics of Ember.Object.

If you still have questions, please post to SO and I (or someone else) will answer soon.

thanks dan, i will go with stack in future for questions.

wagenet closed this Mar 29, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment