动作完成过程时禁用“ Ember禁用”按钮

Question

模板

{{input type="email" value=email placeholder="email"}}
<button {{action "addUser"}} type="submit">Add</button>

控制者

export default Controller.extend({
    actions: {
        addUser: function(){
            //some codes here
            $.ajax({
                //some codes here
            }).then(()=>{
                alert("success");
            });
        }
    }
});

当我按下按钮并调用函数时，addUser我需要禁用按钮，直到整个函数执行完毕

请帮忙..！

Answer 1

有两种方法可以做到这一点。

首先-手动维护状态

这意味着您应该在控制器上具有一个属性，并将其设置为true任务运行时

export default Controller.extend({
    actions: {
        addUser: function(){
            this.set('addUserRunning', true);
            //some codes here
            $.ajax({
                //some codes here
            }).then(()=>{
                alert("success");
            }).always(() => {
                this.set('addUserRunning', false);
            });
        }
    }
});

{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUserRunning}} {{action "addUser"}}>Add</button>

第二（我推荐）-使用ember-concurrency

有一个称为ember-concurrency的插件。您需要浏览文档以了解如何使用它。您将使用任务而不是操作，并且task具有其状态的属性。

将会是这样的：

import { task } from 'ember-concurrency';

export default Controller.extend({
    addUser: task(function* () {
        //some codes here
        yield $.ajax({
           //some codes here
        });
        alert("success");
    }).drop()
});

{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUser.isRunning}} onclick={{perform addUser}}>Add</button>