CODEWITHSUNDEEP
ember.js
user51854
user51854

Reputation: 319

Accessing component property in parent controller in Ember

I want to access a property, say selectedItem defined in a component from a parent controller. How to achieve this? I want to access this item so that I can open a modal defined as a partial with this. If anyone can suggest any better solution that is also welcome.

Upvotes: 4

Views: 2788

Answers (2)

hlidka
hlidka

Reputation: 2345

I have a "count-down" component, which renders a clock, and when the count-down ends, I need to disable some buttons on the view around the component. The solution is similar to @splattne's answer, but it's newer Ember 3.1 syntax and the shared value is not part of the model.

Component:

export default Component.extend({    
    'remaining_time': computed('timer_end', 'dummy', function() {
        let now = new Date();
        let remaining = this.get('timer_end') - now;
        if (remaining < 0) {
            scheduleOnce('afterRender', this, function(){
                this.set('event_listener.expired', true);
            });
            this.set('should_run', false);
            return "Countdown Closed";
        }
       ...
    }),
});

Template:

{{count-down timer_end=model.timer_end event_listener=countdown_status}}

Controller:

export default Controller.extend({
    countdown_status: Object.create({'expired': false}),

    controls_enabled: computed('countdown_status.expired', function() {
        return !this.get('countdown_status.expired');
    }),
    ...
});

Note the scheduleOnce('afterRender': it was necessary for https://github.com/emberjs/ember.js/issues/13948. You will only need it if your component changes the shared value before the whole view is rendered, which is unfortunately what mine did.

Upvotes: 0

splattne
splattne

Reputation: 104040

You could bind the property to a property of the controller. Something like this:

App.FooBarComponent = Ember.Component.extend({
    selectedItem: null,

    // set the property somewhere in your component 
});

In your controller

App.SomeController = Ember.Controller.extend({
    fooBarSelectedItem: /* empty (null) or a value */
});

In your template

{{foo-bar selectedItem=controller.fooBarSelectedItem}}

Upvotes: 3

Related Questions