[英]Promise pending to disable buttons in Ember.js 2
I have a Categories
route with a categories list of course. 我有一个带有类别列表的
Categories
路线。
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... 当我单击其中之一时,将输入类别路径,然后输入该路径的
model()
,该路径会加载项目和任务以及其他内容...
View the demo on Ember-Twiddle 在Ember-Twiddle上观看演示
Everything is good, but: 一切都很好,但是:
I have many buttons which I need to disable if isUrgent
of the category
model is true
. 如果
category
模型的isUrgent
为true
,则需要禁用许多按钮。
category.hbs template category.hbs模板
<button {{action 'something'}} disabled={{if model.isUrgent true false}}>
models/category.js 车型/ 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: user-task
模型具有以下功能:
models/user-task.js 型号/用户task.js
isUrgent: Ember.computed.equal('status', 'urgent')
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). 发生的是,当我打开类别页面时(所以
disabled
为false
),以及在下载user-tasks
模型(与该类别相关,因为模板使用的是{{#each posts ...}}
)按钮已正确禁用(因此, disabled
现在为true
)。
I'm using correctly the PromiseObject? 我使用的PromiseObject是否正确? I need to use something else?
我需要使用其他东西吗? I need something in the template like
isPending
? 我需要像
isPending
这样的模板中的isPending
吗?
I need to use in template {{model.isUrgent.isPending}}
? 我需要在模板
{{model.isUrgent.isPending}}
吗? And how? 如何? Why is it so verbose in templates?
为什么模板这么冗长?
Why all this? 为什么要这样? Where am I wrong?
我哪里错了?
Just add model.isLoading
check to your attribute binding: 只需添加
model.isLoading
检查到您的属性绑定:
<button disabled={{if model.isLoading true model.isUrgent}}>
New demo: Ember Twiddle . 新的演示: 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. 在使用时:
model.posts.isPending
而不是postsLoading
也可以正常工作。
How to check if this works: 如何检查是否有效:
Go to post model and switch between status: 'urgent'
and status: 'notUrgent'
. 转到发布模型并在
status: 'urgent'
和status: 'notUrgent'
之间切换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.