KnockoutJs - 共享可观察数组以获得更多选择

时间:2015-01-21 17:23:10

标签: javascript select knockout.js share

当雇主想要指定员工和保费金额时,他点击“添加员工”按钮,然后出现另一个表格,其中包含选择(员工)和金额输入。

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

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

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

有问题,雇主可以多次选择一名雇员(这是不可取的)。我试图制作新的阵列ko.computed,过滤器选择了员工。但总是不成功。

应禁用曾经选择的选项,或者不应出现在其他选项中。

有人已经解决了吗?

1 个答案:

答案 0 :(得分:2)

确定。我已经像taht一样解决了它:

首先,我必须更换我的

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

然后我写了更新Employees状态的功能总是点击选择... 它通过所有员工检查是否以某种形式选择了员工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 Fiddle HERE