Question

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

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

对象的options可用列表，您可以在下拉列表中进行选择。 items还包含一个对象列表，其中每个对象具有相同的对象，如options-list中的对象。

然后我在项目列表上进行操作，并在每一行上显示一个下拉框。 我需要将项目列表中当前项目中的对象作为选定的选项。然而，当我没有设置optionValue但只尝试匹配整个对象时它不起作用...然后我的observable工作正常，并且整个对象的所有订阅字段都使用新选择进行更新。然而，我得到了初始选择以使用optionValue和Id，如下所示。

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

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

我该怎么做？

Answer 1

所以我对此的看法如下。

你有一套'选项'。每个选项都有一些属性和Id
您有一组'项目'，其中每个项目都有一个属性，其中包含等于选项中的一个对象的对象。因此，每个“项目”都有一个选定的“选项”。

与c＃和其他高级环境不同，javascript没有内置的平等概念。当您执行类似objA == objB的操作时，它将检查引用是否相等（对于数字和字符串等基本类型不是这样），即两个变量实际引用相同的对象。例如，在.NET中，类可以实现IEquatable<T>（和运算符重载），以便objA == objB导致一些自定义比较，这将确定两个不同的对象是否可以被认为是相等的。

因此，当使用淘汰赛和下拉赛道时，重要的是要记住，为了让淘汰赛匹配，你必须确保比较对象确实是相同的。

在你的情况下，我稍微调整了你的模型。我假设items的选择选项属性叫做 SelectedOption 。

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

    // Loop over each of the items and swap out the server-side provided option object
    // with the corresponding option from the options parameter.
    ko.utils.arrayForEach(self.items(), function(item) {
        item.SelectedOption = ko.observable(
            ko.utils.arrayFirst(self.options, function(option) { return option.Id == item.SelectedOption.Id(); })
        );
    });
}

由于你正在使用ko.mapping，我假设选项和items参数以某种方式提供为普通的javascript对象（Ajax，inline 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属性中的选项完全相同，因此敲除现在可以比较它们的相等性，您可以在绑定中使用它：

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

在jsfiddle：http://jsfiddle.net/niik/HDsKC/

测试

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

1 个答案: