Làm cách nào để ngăn nhấp đúp bằng ember.js?

Question

Tôi đang cố gắng tìm ra cách thức thành ngữ để ngăn nút được nhấp nhiều lần.

Hãy tưởng tượng tôi có một hành động điều khiển đơn giản như vậy ...

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

và trong mẫu của tôi, tôi có một nút được xác định như vậy ...

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

Liệu các hành động có một tùy chọn để vô hiệu hóa nó ngay lập tức/làm cho nó như vậy chỉ khi sự kiện thực sự sẽ được xử lý bởi bộ điều khiển (cho đến khi nó bị vô hiệu hóa ví dụ)

Edit

Tôi đang tìm một giải pháp sử dụng lâu dài/đa sử dụng. Một ý tưởng tôi đang nghĩ đến là tạo ra một thành phần đặc biệt được gọi là "nút tắt" cho phép tôi tạo loại nút tùy chỉnh thường tắt sau khi một lần nhấp chuột duy nhất sẽ vẫn cho phép tôi bong bóng các sự kiện cho cha mẹ điều khiển. Điều này cảm thấy nặng hơn một chút so với tôi muốn nếu có một tùy chọn khác hoặc nếu ai đó đã tạo một addon chỉ cho điều này - hãy cho tôi biết

Answer 1

Như một lần, nếu bạn ràng buộc thuộc tính bị vô hiệu hóa trên nút của mình như vậy

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

và sau đó thiết lập điều khiển của bạn như

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

thì nút sẽ trở thành tàn tật sau khi bạn nhấp vào nó một lần

Nếu bạn muốn có một reusabl e thành phần tôi muốn vay nút spinner từ http://emberjs.com/guides/cookbook/helpers_and_components/spin_button_for_asynchronous_actions/ và tinh chỉnh nó như bạn cần.

Vì vậy, JS của bạn sẽ là dọc theo dòng của

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

Mẫu cho thành phần của bạn sẽ

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

và sau đó bạn sẽ chỉ bao gồm những điều sau đây khi bạn cần phải vào nút để xuất hiện

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