Promise pending to disable buttons in Ember.js 2

Question

I have a Categories route with a categories list of course.

When I click on one of them the category route is entered and then the model() of this route which loads items and tasks and other things...

View the demo on Ember-Twiddle

Everything is good, but:

I have many buttons which I need to disable if isUrgent of the category model is true .

category.hbs template

<button {{action 'something'}} disabled={{if model.isUrgent true false}}>

models/category.js

isUrgent: Ember.computed('posts.[]', function () {
    let promise = this.get('posts').then(posts => Ember.RSVP.all(posts.map(post => post.get('isUrgent'))).then((values) => values.some((prop) => prop === true)));
    return PromiseObject.create({
        promise
    });
})

The user-task model has this:

models/user-task.js

isUrgent: Ember.computed.equal('status', 'urgent')

The problem

What happens is that the buttons are enabled when I open the category page (so disabled is false ) and after the download of the user-tasks models (related to that category, because the template is using something like {{#each posts ...}} ) the buttons are correctly disabled (so disabled is true now).

Question

I'm using correctly the PromiseObject? I need to use something else? I need something in the template like isPending ?

I need to use in template {{model.isUrgent.isPending}} ? And how? Why is it so verbose in templates?

Why all this? Where am I wrong?

Answer 1

Just add model.isLoading check to your attribute binding:

<button disabled={{if model.isLoading true model.isUrgent}}>

UPDATE

New demo: Ember Twiddle .

Basically, you can add few computed properties to your category model:

urgentPosts: Ember.computed.filterBy('posts', 'isUrgent'),

postsLoading: Ember.computed.filterBy('posts', 'isLoading'),

isUrgent: Ember.computed.gt('urgentPosts.length', 0)

And then ultimately take advantage of it:

<button disabled={{if model.postsLoading true model.isUrgent}}>Is Not Urgent (Disabled from beginning and during loading is correct)</button><br><br>

While using: model.posts.isPending instead of postsLoading would also work fine.

How to check if this works:

Go to post model and switch between status: 'urgent' and status: 'notUrgent' .