承诺待定以禁用Ember.js 2中的按钮

Question

我有一个带有类别列表的Categories路线。

当我单击其中之一时，将输入类别路径，然后输入该路径的model() ，该路径会加载项目和任务以及其他内容...

在Ember-Twiddle上观看演示

一切都很好，但是：

如果category模型的isUrgent为true ，则需要禁用许多按钮。

category.hbs模板

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

车型/ 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
    });
})

user-task模型具有以下功能：

型号/用户task.js

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

问题

发生的是，当我打开类别页面时（所以disabled为false ），以及在下载user-tasks模型（与该类别相关，因为模板使用的是{{#each posts ...}} ）按钮已正确禁用（因此， disabled现在为true ）。

题

我使用的PromiseObject是否正确？ 我需要使用其他东西吗？ 我需要像isPending这样的模板中的isPending吗？

我需要在模板{{model.isUrgent.isPending}}吗？ 如何？ 为什么模板这么冗长？

为什么要这样？ 我哪里错了？

Answer 1

只需添加model.isLoading检查到您的属性绑定：

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

UPDATE

新的演示： Ember Twiddle 。

基本上，您可以向类别模型添加一些计算的属性：

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

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

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

然后最终利用它：

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

在使用时： model.posts.isPending而不是postsLoading也可以正常工作。

如何检查是否有效：

转到发布模型并在status: 'urgent'和status: 'notUrgent'之间切换。