javascript - 在 Ember 中传递有关操作的参数

Question

我的“hbs”文件中有三个切换按钮。我在与该模板相关的 Controller 中有“选项”数组。每当用户选择/取消选择任何按钮时，我想更新“选项”。例如，如果选择了按钮 1 而其他按钮未选择 -“选项”必须为 [1]。如果选择了第二个和第三个按钮而第一个没有选择 -“选项”必须为 [2, 3]。

我尝试通过带有参数的操作来实现这一点:

<button {{action 'toggleOption' name aria-pressed}}
id="first-button" name="1" type="button" class="btn 
option-toggle-button" data-toggle="button" aria-pressed="false"
autocomplete="off">First button</button>

Controller :

import Ember from 'ember';

export default Ember.Controller.extend({
    options: [],
    actions: {
        toggleOption(id, selected) {
            var options = this.get("options");

            if (selected) {
                if (options.contains(id))
                    options.push(id);
            } else {
                var index = options.indexOf(id);
                if (index >= 0)
                    options.splice(index, 1);
            }

            this.set("options", options);
        }
    }
});

但是“toggleOption”正在使用“未定义”参数进行调用，所以我认为我走错了路。

问题:如何实现所需的逻辑？也许我需要一种完全不同的方法来解决这个问题？

Answer 1

您可以使用:

<button {{action 'toggleOption' "1"}} id="first-button" name="1" type="button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false"autocomplete="off">First button</button>

<button {{action 'toggleOption' "2"}} id="first-button" name="1" type="button" class="btn option-toggle-button" data-toggle="button" aria-pressed="false"autocomplete="off">Second button</button>

其中“1”和“2”是传递给 Controller ​​操作的值。然后在 toggleOption 操作中，您可以执行逻辑以将值添加/删除到 options 数组

actions: {
    toggleOption(value) {
        // ...your logic here...
    }
}