Ember.computed.alias attributes not updating

1

In a project where I use EAK i have the two controllers:

controllers/autocomplete.js:

export default Ember.Controller.extend({
    search: "intiial value",
    searchText: null,
    searchResults: function() {
        console.log("autocomplete controller");
        var searchText = this.get('searchText');
        this.set('search', "ntueontueotueo");

        console.log(this.get('search'));
        if (!searchText) {
            return;
        } else {
            return ["One", "Two", "Three"];
        }
    }.property("searchText")
});

controllers/persons.js:

export default Ember.ArrayController.extend({
    needs: 'autocomplete',
    search: Ember.computed.alias("controllers.autocomplete.search"),
    searchResults: function() {
        console.log("Persons Controller");
        return this.get('search');
        
    }.observes('search')

});

In persons.hbs {{search}} is not being updated when i change autocomplete.searchText and the searchResults function is never called. What am I doing wrong?

2 Likes
2

BUMP! Anybody found anything?

3

Would you mind making a jsFiddle to demonstrate the problem? It makes it a lot easier for people to jump in and help troubleshoot.

4

This is due to the lazy CP’s optimization, which means observers won’t fire in the following case

  1. prop is a CP
  2. You have an observer on prop
  3. Nothing else has called get on that CP

The solution is that you need to call .get on search (the CP) before the observer will activate. Usually this isn’t required manually because you’re often displaying search in a template, but in your case you’ll need to call .get() on search.

A common approach might be changing your .observes('search') to .observes('search').on('init')

3 Likes