ember.js를 사용하여 더블 클릭을 방지하는 방법은 무엇입니까?

Question

버튼을 여러 번 클릭하지 못하도록하는 관용적 인 방법을 알아 내려고하고 있습니다.

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

는 작업이 옵션을 가지고 있는가 ... 내가 지금 같은 간단한 컨트롤러 액션이

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

을 상상해 내 템플릿에 나는과 같이 정의 된 버튼이 있습니다 즉시 비활성화하거나 한 번만 true 이벤트가 컨트롤러에 의해 처리됩니다 (예 : 비활성화 될 때까지)

나는 장기간/복수 사용 솔루션을 찾고 있습니다. 내가 생각하고있는 한 가지 생각은 "버튼 사용 안 함"이라는 특수한 ember 구성 요소를 만들어 하나의 클릭 후 일반적으로 사용할 수없는 맞춤형 버튼 유형을 만들 수 있다는 것입니다.하지만 부모에게 이벤트를 버블 링 할 수 있습니다. 제어 장치. 이것은 내가 원하는 것보다 약간 무거운 느낌이 든다. 다른 옵션이 존재하거나 누군가가 이것에 대한 애드온을 만든 경우 - 알려 달라.

Answer 1

버튼으로 disabled 속성을 바인드하면 일회용으로 당신이 reusabl를 원하는 경우 한 번

그것을 클릭 한 후 같은 너무

<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는 구성 요소에 대한 템플릿

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

것

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='application'> 
    {{spin-button id="forapplication" isLoading = isLoading buttonText=buttonText action='saveData'}} 
</script>