knockout.js - 无法立即进行多选更新

Question

我正在尝试从淘汰赛官方网站实现“更好的列表示例”：http: //knockoutjs.com/examples/betterList.html

我正在显示技能列表，一切都很好，除了多选的 UI 更新。当我单击“添加”按钮时，可观察属性会立即更新，但要查看多选中的任何更改，我必须在 UI 中单击它，然后新技能会出现在显示屏上。

我尝试使用更改和模糊事件： valueupdate: 'change'，没有成功。

模型

self.allSkills = ko.observableArray("");
self.skillToAdd = ko.observable("");
self.selectedSkills = ko.observableArray("");

self.addSkill = function() {
                    self.allSkills().push(self.skillToAdd());
                    self.skillToAdd("");
                };

看法

<form data-bind="submit: $root.addSkill">
  <label>Required Skills:</label>
  Add skill: <input type="text" data-bind="value: $root.skillToAdd, valueUpdate: 'afterkeydown'"/>
  <button type="submit" data-bind="enable: $root.skillToAdd().length>0">Add</button>
</form>
<select multiple="multiple" data-bind="options: $root.allSkills, optionsText: $data, selectedOptions: $root.selectedSkills">
</select>

Answer 1

您正在推动底层数组的值。推入 ObservableArray 本身 -

self.addSkill = function() {
    var valueToPush = self.skillToAdd();
    self.allSkills.push(valueToPush);
    self.skillToAdd(null);
};