How to prevent double clicks with ember.js?

Question

I am trying to understand an idiomatic way to avoid clicking a button several times.

Imagine I have a simple controller action, for example ...

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

and in my template I have a button defined like this ...

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

Does the action have the ability to immediately disable it / make it so that only once when the true event is processed by the controller (until it is disabled, for example)

Edit

I am looking for a long-term / multi-purpose solution. One of the ideas I’m thinking about is to create a special ember element called a “disable button” that would allow me to create my own type of button, which usually turns off after a single click, but still allows me to bubble events to the parents of the controller. It feels a little harder than I would like if there is another option, or if someone created an addon for this very purpose - let me know

Answer 1

Like a one-time, if you bind a disabled attribute on your button like this

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

and then configure your controller for example

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

then the button will be disabled after clicking on it.

If you want to use the reusable component, I would borrow the spinner button from http://emberjs.com/guides/cookbook/helpers_and_components/spin_button_for_asynchronous_actions/ and configure it as needed.

So your JS will be down the line

 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'); } } } }); 

The template for your component will be

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

and then you just include the following, where you need a button to display

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