Promise pending to disable buttons is not working


#1

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: https://ember-twiddle.com/4f7846f4c96a77c669f94c2ff703631b?openFiles=templates.category.hbs%2C&route=%2Fcategory%2F1

Everything 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? Really? So verbose in templates?

Why all this? Where I’m wrong?