承諾待定以禁用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'之間切換。