将下拉列表绑定到外部模态的敲除值

Bind dropdown to knockout value from external modal

本文关键字：模态 外部 下拉列表 绑定      更新时间：2023-09-26

我有一个视图模型包含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数组填充。如果我选择一个用户级别(在这种情况下,开发人员)并保存我的数据库保存的价值,和重新加载页面显示正确的值,但是一旦我选择编辑用户(使用引导模式和数据绑定,自动下拉选择Admin(第一个数组中),而不是开发人员从我的用户模型,然后更新用户模型自用户级用户必然会下降。

我认为你的绑定是不正确的。你没有绑定到可观察数组，而是绑定到可观察数组解析到的内容(即数组)

使用

options: $parent.UserLevels
不是

options: $parent.UserLevels()

您可能需要添加一个optionsValue绑定。

从<<p> strong>医生:

通常情况下，您只希望使用optionsValue作为确保的集合更新时，KO可以正确地保留选择可用的选项。例如，如果你反复得到一个列表"car"对象通过Ajax调用，并希望确保选中的汽车，您可能需要将optionsValue设置为"carId"或无论每个"汽车"对象有什么唯一标识符，否则KO不会必须知道前面的"car"对象对应于哪个哪一个是新的

我找到了一种方法来解决这个问题，用我自己的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) {
       /* */
    }
};
相关文章：