gpt4 book ai didi

ember.js - 如何使用 ember.js 防止双击?

转载 作者:行者123 更新时间:2023-12-02 19:50:39 24 4
gpt4 key购买 nike

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

想象一下我有一个简单的 Controller 操作,就像这样......

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

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

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

该操作是否有一个选项可以立即禁用它/使其只有一次真正的事件才会被 Controller 处理(例如,直到它被禁用)

编辑

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

最佳答案

作为一次性,如果您像这样在按钮上绑定(bind)禁用属性

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

然后像这样设置你的 Controller

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>

关于ember.js - 如何使用 ember.js 防止双击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27112354/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com