Question

我有一个包含2个数组的视图模型。一个数组是用户数组，另一个是用户级数组。

{
  "Users": [
    {
      "UserLevel": {
        "Permissions": [],
        "Id": 2,
        "Name": "Developer",
        "SortOrder": 1,
        "IsHidden": false
      },
      "Id": 1,
      "Username": "Björn Jakobsson",
      "Password": null,
      "Fullname": null,
      "Email": "bjiorn@bjinteractive.se",
      "Phone": null
    }
  ],
  "UserLevels": ko.observableArray([
  {
    "Permissions": [],
    "Id": 1,
    "Name": "Admin",
    "SortOrder": 2,
    "IsHidden": false
  },
  {
    "Permissions": [],
    "Id": 2,
    "Name": "Developer",
    "SortOrder": 1,
    "IsHidden": false
  }
])
}

和下拉

<select data-bind="options: $parent.UserLevels(), optionsText:'Name', value: UserLevel" class="form-control"></select>

从用户阵列编辑用户时，我有一个下拉列表，用于选择该用户的用户级别，该用户级别是从 UserLevels 数组中填充的。如果我选择一个用户级别（在本例中为Developer）并保存我的数据库中的值，则保存所有内容，并重新加载页面显示正确的值，但是一旦我选择编辑用户（使用bootstrap模式）和with-data绑定，下拉菜单自动选择Admin（数组中的第一个）而不是我的用户模型中的Developer，然后更新用户模型，因为用户的用户级别绑定到下拉列表。

Answer 1

我认为您的绑定不正确。您没有绑定到可观察数组，而是绑定到可观察数组解析到的数组（即数组）

使用

options: $parent.UserLevels

而不是

options: $parent.UserLevels()

Answer 2

您可能需要添加optionsValue绑定。

来自doc：

通常，您只想使用optionsValue作为确保方法当你更新一组时，KO可以正确地保留选择可用选项。例如，如果您反复获取列表 “汽车”对象通过Ajax调用并希望确保所选择的汽车保留，您可能需要将optionsValue设置为“carId”或每个“汽车”对象具有的唯一标识符，否则KO不会必须知道以前哪个“汽车”对象对应哪个新的。

Answer 3

我找到了一种解决问题的方法，而不是使用我自己的biding来代替 value 。以下是我使用的代码。编辑的任何缺点或错误？我对KO很新，有时候在使用unwrap，unwrapobservable等时仍然会遇到问题，但是代码可以正常工作。改进的想法？

ko.bindingHandlers.valueBasedOnObject = {
    init: function (element, valueAccessor, allBindings) {
        var prop = allBindings().optionsValue;
        var value = valueAccessor();

        $(element).change(function () {
            var value = $(element).val();
            var selectedModel = ko.utils.arrayFirst(ko.unwrap(allBindings().options()), function (item) {
                return ko.utils.unwrapObservable(item[prop]) == value;
            });

            valueAccessor()(selectedModel);
        });


        var valueUnwrapped = ko.unwrap(value);

        $(element).val(valueUnwrapped[prop]);
    },

    update: function (element, valueAccessor, allBindings) {
       /* */
    }
};

将下拉值从外部模态绑定到淘汰值

3 个答案: