如何使用 ember.js 防止双击？

Question

我正在尝试找出防止按钮被多次点击的惯用方法。

想象一下我有一个像这样的简单控制器动作......

var FooController = Ember.ObjectController.extend({
  actions: {
    go: function() {
        console.log("done!");
    }
  }
});

在我的模板中，我有一个这样定义的按钮...

<button {{action go}}>Click Me Fast</button>

该操作是否可以选择立即禁用它/使其只有在控制器处理真正的事件时才会处理（例如，直到它被禁用）

编辑

我正在寻找一种长期/多用途的解决方案。我正在考虑的一个想法是创建一个名为“button-disable”的特殊 ember 组件，这将允许我创建一个自定义按钮类型，该类型通常在单击后禁用 - 但仍然允许我将事件冒泡给父级控制器。这感觉比我想要的要重一些，所以如果存在其他选项，或者如果有人为此创建了插件 - 请告诉我

Answer 1

一次性，如果你像这样在按钮上绑定 disabled 属性

<button {{action go}} {{bind-attr disabled=actionPerformed}}>

然后像这样设置你的控制器

var FooController = Ember.ObjectController.extend({
    actionPerformed: false,
    actions: {
      go: function() {
        this.set("actionPerformed", true);
        console.log("done!");
    }
  }
}); 

然后点击一次按钮就会被禁用

如果您想要一个可重复使用的组件，我会从 http://emberjs.com/guides/cookbook/helpers_and_components/spin_button_for_asynchronous_actions/ 借用微调器按钮并根据需要对其进行调整。

所以你的 JS 应该是这样的

window.SpinEg = Ember.Application.create({});

SpinEg.ApplicationController = Ember.Controller.extend({
    isLoading:false,
  buttonText:"Submit",
    actions:{
        saveData:function(){
            var self = this;
            var saveTime = Ember.run.later(function(){
                self.set('isLoading', false);

            }, 1000);
        }
    }
});

SpinEg.SpinButtonComponent = Ember.Component.extend({
    classNames: ['button'],
  buttonText:"Save",
    isLoading:false,
    actions:{
        showLoading:function(){
            if(!this.get('isLoading')){
                this.set('isLoading', true);
                this.sendAction('action');
            }
        }
    }
});

您的组件的模板将是

<script type='text/x-handlebars' id='components/spin-button'>
    <button {{bind-attr id=id}} {{action 'showLoading'}}>
        {{#if isLoading}}
            <img src="http://i639.photobucket.com/albums/uu116/pksjce/spiffygif_18x18.gif"></img>
        {{else}}
            {{buttonText}}
        {{/if}}
    </button>
</script>

然后您只需在需要按钮出现的地方添加以下内容

<script type='text/x-handlebars' id='application'>
    {{spin-button id="forapplication" isLoading = isLoading buttonText=buttonText  action='saveData'}}
</script>