Ember.js computed property from store

Question

I'm trying to get a simple count of objects returned by REST get request from the server to use in another controller in Ember.js

For this reason I need to make an additional request to the server. Basically here's my code and it almost works.. but not quite yet. Maybe someone can figure out why.

It return a PromiseArray, that's why I'm using .then() to access the properties .

App.TestController = Ember.ObjectController.extend({
    totalCount: function() {
        return this.store.find('question', {test: this.get('id')}).then(function(items) {
            var count = items.get('content').get('length');
            console.log(count); // This actually logs correct values
            return count;
        })
    }.property('question')
})

It does what it suppose to do and I'm getting correct values printed out in the console.log(), but when I try to use {{totalCount}} in the view template I'm getting [object Object] instead of an integer.

Also, am I properly observing the questions property? if the value changes in its proper controller will the value update?

Thanks

possible duplicate of [Rendering resolved promise value in Ember handlebars template](http://stackoverflow.com/questions/20623027/rendering-resolved-promise-value-in-ember-handlebars-template) — aemxdp, Feb 23 '14 at 20:01

Karl-Johan Sjögren · Answer 1 · 2014-02-24T05:35:10.467

8

The problem you are seeing is because your are returning a promise as the value of the property and handlebars won't evaluate that promise for you. What you need to do is create a separate function that observes question and then call your store there to update the totalCount-property. It would be something like this.

App.TestController = Ember.ObjectController.extend({
    totalCount: 0,
    totalCountUpdate: function() {
        var that = this;
        this.store.find('question', {test: this.get('id')}).then(function(items)     {
            var count = items.get('content').get('length');
            console.log(count);
            that.set('totalCount', count);
        })
    }.observes('question')
})

edited Feb 24 '14 at 05:35

answered Feb 23 '14 at 20:03

Karl-Johan Sjögren

16,544
7
59
68

Thank you, Karl-Johan! That actually makes sense. However, the view still doesn't gets updated event though the console.log outputs the desired values. Am I observing the right property? Do I need to implicitly call the totalCountUpdate? In my view I'm still using {{totalCount}}, but it is stuck at 0. – kernelpanic Feb 23 '14 at 20:50
Makes me think I should probably observe the totalCount property somehow? Because it is the one getting changed.. – kernelpanic Feb 23 '14 at 20:54
The view will automatically create an observer for totalCount. The code above looks fine. When the question changes, the totalCountUpdate will be called, which in turn should call set the totalCount, which triggers a property change notification that the UI should respond to. Can you add a jsbin reproducing the issue? – Miguel Madero Feb 24 '14 at 03:01
You won't need to explicitly call totalCountUpdate, thats what the `.observes('question')` part is for (ie when `question` is changed this method will run). As Miguel said, a JSBin with a sample to reproduce the problem would help a lot to diagnose this. – Karl-Johan Sjögren Feb 24 '14 at 05:36
Please see my update. I upload the app online instead of jsbin so you can see in context what I'm talking about. – kernelpanic Feb 24 '14 at 16:15

Elise Chant · Answer 2 · 2014-11-19T20:09:15.787

Alternatively totalCount might lazily set itself, like this:

App.TestController = Ember.ObjectController.extend({
    totalCount: 0,
    question: // evaluate to something,
    totalCount: function() {
        var that = this;
        that.store.find('question', {test: that.get('id')}).then(function(items)     {
            var count = items.get('content').get('length');
            that.set('totalCount', count);
        })
    }.observes('question').property()
})

Ember.js computed property from store

2 Answers2