KnockoutJs - 共享可观察数组以提供更多选择

KnockoutJs - shared observable array for more selects

本文关键字：选择 数组 共享 观察 KnockoutJs      更新时间：2023-09-26

>假设当雇主想要指定雇员和保费金额时，他点击"添加雇员"按钮，出现另一个表格，其中包含选择（雇员）并输入金额。

<select>
    <option>John</option>
    <option>George</option>...
</select>
<input type="text" placeholder="Amount"/>

我有一个共享的ko.observableArray，用于动态添加选择框和输入。它工作正常...

存在一个问题，雇主可以多次选择一名雇员（这是不可取的）。我试图制作新的数组ko.computed，过滤选择员工。但总是不成功。

应禁用"选择后"选项，或者不应出现在其他选择中。

有人已经解决了吗？

好的。我已经这样解决了：

首先，我必须更换我的

<selec data-bind="options: employyes">....

通过 foreach 并手动呈现我的项目

<select data-bind="value: selectedEmployee, foreach: $root.employees, click: $root.updateEmployees, optionsAfterRender: $root.updateEmployees">
    <option value selected="selected" data-bind="visible: $index === 0">Choose...</option>
    <option data-bind="value: id, text: name, attr: {'disabled': disabled}"></option>
</select>

然后我编写了函数，该函数总是更新员工的状态，我单击选择...它正在遍历所有员工并检查是否以某种形式选择了员工 ID，如果是，则禁用属性为 true 上的座位，否则为 false。

self.updateEmployees = function() {
        ko.utils.arrayForEach(self.employees(), function (employee) {
            var isEmployeeUsed = false;
            ko.utils.arrayForEach(self.forms(), function (form) {
                console.log(employee.id());
                if (typeof employee !== 'undefined' && typeof form !== 'undefined' && employee.id() === form.selectedEmployee()) {
                    isEmployeeUsed = true;
                }
            });
            employee.disabled(isEmployeeUsed);    
        });

JS 小提琴在这里

相关文章：