javascript - 使用 knockout.js 在 select 上使用值绑定(bind)更新整个对象？

Question

我有一个显示对象列表的选择下拉菜单，name 属性是显示的文本，id 属性是每个选项绑定(bind)到的值，以及一个 value: user.id 绑定(bind)，它来自另一个对象的单独属性。

<td data-bind=""><select data-bind="options: peopleResponsible, optionsText: 'name', optionsValue: 'id', value: user.id"></select></td>

当我从下拉列表中选择一个新的人员对象时，只有 user 的 id 被更新。所有其他属性(姓名、用户名、年龄等)都不会更新。

我需要它做的是，当选择一个新的 peopleResponsible 选项时，我希望它将该对象的所有属性复制到 用户对象。

我怀疑目前它无法正常工作，因为 user 对象本身是不可观察的，只有它的属性是可观察的。以下是我的数据的映射方式:

ko.mapping.fromJS(taskOutlines, {}, mappedTaskOutlines);

TaskOutline 包含许多 Task，每个 Task 包含一个 User。

有什么想法吗？

Answer 1

你可以这样做:

var vm = {
  peopleResponsible: ko.observableArray([{
    id: ko.observable(1),
    name: ko.observable("p1")
  }, {
    id: ko.observable(2),
    name: ko.observable("p2")
  }, {
    id: ko.observable(3),
    name: ko.observable("p3")
  }]),
  selectedUser: ko.observable()
}

vm.selectedUser(vm.peopleResponsible()[1]); // pre select a user

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>



<select data-bind="options: peopleResponsible, optionsText: 'name', value: selectedUser"></select>
<div data-bind="with: selectedUser">
  <p>Id:
    <label data-bind="text: id"></label>
  </p>
  <p>Name:
    <label data-bind="text: name"></label>
  </p>
</div>

当做出选择时，该选择将是对可观察数组、属性和所有对象中任意对象的引用。然后，这个选定的对象将被放置在“selectedUser”可观察对象中。

简而言之，删除“optionsValue”绑定(bind)将绑定(bind)整个对象而不是 id 属性。