在 Ember 中,可以使用 action 和状态属性来实现按下取消按钮时,下拉列表恢复原始状态的功能。
首先,在模板文件中定义一个下拉列表和一个取消按钮,并绑定相应的 action:
{{!-- 模板文件 app/templates/components/my-dropdown.hbs --}}
然后,在组件文件中定义相关的 action 和状态属性:
// 组件文件 app/components/my-dropdown.js
import Component from '@ember/component';
import { set } from '@ember/object';
export default Component.extend({
selectedItem: null,
originalItem: null,
actions: {
selectItem(item) {
set(this, 'selectedItem', item);
},
cancel() {
set(this, 'selectedItem', this.originalItem);
}
},
init() {
this._super(...arguments);
set(this, 'originalItem', this.selectedItem);
}
});
在上述代码中,selectedItem
是用来绑定选中的下拉列表项的属性。originalItem
是用来保存初始状态下的下拉列表项的属性。在 cancel
action 中,将 selectedItem
属性重新设置为 originalItem
,从而恢复原始状态。
最后,使用该组件:
{{!-- 在其他模板文件中使用该组件 --}}
在上述代码中,@items
是传递给组件的下拉列表项数组,@selectedItem
是传递给组件的选中项。
这样,当按下取消按钮时,下拉列表会恢复到初始状态。