使用 knockout.js 在 select 上使用值绑定更新整个对象？答案

【问题标题】：Update entire object with value binding on select with knockout.js?使用 knockout.js 在 select 上使用值绑定更新整个对象？
【发布时间】：2015-09-11 05:46:24
【问题描述】：

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

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

当我从下拉列表中选择一个新的人员对象时，只有user 上的id 正在更新。所有其他属性（姓名、用户名、年龄等）都没有更新。

它需要做什么是选择新的peopleResponsible选项时，我希望它将其从该对象的属性的所有所有复制到user对象。

我怀疑目前它不起作用，因为user 对象本身是不可观察的，只有它的属性是可观察的。以下是我的数据的映射方式：

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

其中一个TaskOutline 包含许多Tasks，而每个Task 包含一个User。

有什么想法吗？

【问题讨论】：

尝试设置一个小提琴它会很容易修复它。欢呼

标签： javascript knockout.js mapping observable

【解决方案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" observable 中。

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

【讨论】：

好的，谢谢，这似乎绑定了整个selectedUser 对象，但它最初并没有绑定正确的对象（即当我已经选择了预设用户时），我该如何解决这个问题？
我已更新答案以包含演示。该演示还向您展示了如何预先选择用户。

【解决方案2】：

value 绑定只设置一个 observable。不知道东西是怎么用的，很难说你应该怎么做才能得到你想要的结果。一种可能性是创建一个函数，将subscribe 复制到user.id。

【讨论】：