Ember 动作完成时禁用按钮

Question

template

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

controller

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-并发

有一个名为 ember-concurrency 的插件。您需要浏览 docs 以了解如何使用它。您将使用任务代替操作，任务具有其状态的属性。

它将是这样的：

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>

Ember 动作完成时禁用按钮

Ember Disable button while an action is completing its process

ember.js

首先 - 手动维护状态

第二种（本人推荐）——使用ember-并发