Javascript 使用KnockoutJS对具有对象的下拉列表进行初始选择

我有一个模型，看起来像这不是实际的代码，所以不要介意可能的错误输入

model = function(option, items) {
    self = this;
    self.options = options;
    self.items = ko.mapping.fromJS(items);
}

选项包含可以在下拉列表中选择的对象列表。这些项还包含一个对象列表，其中每个对象都有一个与选项列表中相同的对象

然后我浏览项目列表，并在每行显示一个下拉框。我在这里需要选择项目列表中当前项目中的对象。然而，当我不设置optionValue，只尝试匹配整个对象时，它就不起作用了。。。然而，我的observable工作正常，整个对象的所有订阅字段都会随着新的选择而更新。然而，我得到了使用optionValue和Id的初始选择，如下所示

<select data-bind="options: $parent.options, optionsValue:'Id', optionsText: 'Name', value: item.Id"></select> 

我现在的问题是，只有绑定到Id的元素得到更新？我需要更新当前项目的所有属性，即使当我在下拉列表中更改某些内容时，它只是现在更改的Id

---

我该怎么做呢？

所以我的看法如下

你有一套“选项”。每个选项都有一些属性和一个Id 您有一组“项”，其中每个项都有一个属性，其中包含一个对象，该对象等于选项中的一个对象。因此，每个“项目”都有一个选定的“选项”。 与c和其他高级环境不同，javascript没有内置的平等概念。当您执行类似于objA==objB的操作时，它将检查对于诸如数字和字符串之类的基元类型的引用相等性not true，即这两个变量实际上引用同一个对象。例如，在.NET中，一个类可以实现IEquatable和运算符重载，这样objA==objB会导致一些自定义比较，从而确定两个不同的对象是否相等

因此，在使用击倒和下拉等操作时，重要的是要记住，为了使击倒匹配，您必须确保所比较的对象确实是相同的

就你而言，我对你的模型做了一些调整。我假设items的selection option属性称为SelectedOption

因为您使用的是ko.mapping，所以我假设options和items参数是作为普通的javascript对象提供的，比如Ajax、内联js

opts = [ 
    { Id: 1, Name: "Option 1" },
    { Id: 2, Name: "Option 2" },
    { Id: 3, Name: "Option 3" }
];

var items = [
    { Id: 1, Name: "Item 1", SelectedOption: { Id: 1, Name: "Option 1" } },
    { Id: 2, Name: "Item 2", SelectedOption: { Id: 2, Name: "Option 2" } },
    { Id: 3, Name: "Item 3", SelectedOption: { Id: 3, Name: "Option 3" } }
];

var viewModel = new model(opts, items);

由于每个项的SelectedOption参数中包含的选项与options属性中的选项完全相同，knockout现在可以比较它们是否相等，并且您可以在绑定中使用它：

<div data-bind="foreach: items">
    <select data-bind="options: $parent.options, optionsText: 'Name', value: SelectedOption"></select>
</div>

---

在jsfiddle上进行测试：

您可能希望在jsfiddle.net上重现该问题—该问题的最佳解决方案+1.

<div data-bind="foreach: items">
    <select data-bind="options: $parent.options, optionsText: 'Name', value: SelectedOption"></select>
</div>