Ember component cannot use access controller property via "needs"

Question

I'm trying to change a controller's property from a component as follows(JSBIN example http://jsbin.com/gevuhu):

App.CategoryManagerController = Ember.Controller.extend({
  selectedCategory: null,
});

App.BlogPostComponent = Ember.Component.extend({
    needs: ['categoryManager'],
    selectedCategory: Ember.computed.alias('controllers.categoryManager.selectedCategory'),
    actions:{
        selectedCategory: function (){
            this.set('selectedCategory',1);
        }
    }
});

but getting the error Property set failed: object in path "controllers.categoryManager" could not be found or was destroyed.

Is it that we cannot use "needs" in components ?

there is no `needs` property for components, only controllers. you need to pass in any data you want in the component from the component's handlebars helper — Grapho, Dec 31 '14 at 15:54
what is I want to update a property from a component in another controller ? — Noor, Dec 31 '14 at 15:55

score 4 · Accepted Answer · answered Dec 31 '14 at 15:58

Ember Components are completely isolated from surrounding context including controllers (see here). That's the bad news. The good news is that if you pass selectedCategory into the component, it will become 2-way bound, so any change to it in the component will be known by your controller.

So, your controller could be something like:

App.ApplicationController = Ember.ObjectController.extend({
    needs: ['categoryManager'],
    selectedCategory: Ember.computed.alias('controllers.categoryManager.selectedCategory'), 
    selectedCategoryChanged: function(){
      alert("NEW CATEGORY: " + this.get('selectedCategory'));
    }.observes('selectedCategory')
});

and then in your application template, you can say

{{ blog-post selectedCategory=selectedCategory }}

See a working example here

score 0 · Answer 2 · answered Feb 04 '16 at 05:57

0

In later version like 2.2. We'll be writing this as:

App.ApplicationController = Ember.Controller.extend({
    categoryManager: Ember.inject.controller("categoryManager")
});

and now, categoryManager will now have the controller named categoryManager.

answered Feb 04 '16 at 05:57

Surya Purohit

1,090
1
9
29

Ember component cannot use access controller property via "needs"

2 Answers2