KnockoutJs - 用于更多选择的共享可观察数组

Question

说当雇主想要指定员工和保费金额时，他点击按钮 "add employee" 会出现另一个带有 select(employees) 的表格并输入金额。

<select>
    <option>John</option>
    <option>George</option>...
</select>

<input type="text" placeholder="Amount"/>

我有一个共享 ko.observableArray 用于动态添加 select 框和输入。效果很好...

有问题，雇主可以 select 一名雇员不止一次（这是不可取的）。我尝试创建新数组 ko.computed，以过滤 selected 员工。但是总是不成功。

曾经 selected 的选项应该被禁用或者不应该出现在其他 selects 中。

有人解决了吗？

Answer 1

好的。我已经解决了它：

首先我必须更换我的

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

然后我编写了更新员工状态的函数，我总是点击 select... 它遍历所有员工并检查员工 ID 是否以某种形式被 select 编辑，如果是，则禁用属性为 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 Fiddle HERE

KnockoutJs - 用于更多选择的共享可观察数组

KnockoutJs - shared observable array for more selects

javascript

select

share

knockout.js