KnockoutJS-将值加载到下拉列表.“选定值”始终为null

KnockoutJS - Loading values to dropdown . Selected Value is null always

本文关键字：选定值 null 加载 下拉列表 KnockoutJS-      更新时间：2023-09-26

这是我的视图模型，它有助于加载要下拉的项目正在加载项，但当我检查元素"value"属性为空时。如何获取选定的值？

$(function () {
  tss.Department = function (selectedItem) {
    var self = this;
    self.id = ko.observable();
    self.description = ko.observable();
    self.isSelected = ko.computed(function () {
        return selectedItem() === self;
    });
    self.stateHasChanged = ko.observable(false);
  };
  tss.vm = (function () {
    var metadata = {
        pageTitle: "My App"
    },
    selectedDepartment = ko.observable(),
    departments = ko.observableArray([]),
    sortFunction = function (a, b) {
        return a.description().toLowerCase() > b.description().toLowerCase() ? 1 : -1;
    },
    selectDepartment = function (p) {
        selectedDepartment(p);
    },
    loadDepartments = function () {
        tss.departmentDataService.getDepartments(tss.vm.loadDepartmentsCallback);
    },
    loadDepartmentsCallback = function (json) {
        $.each(json, function (i, p) {
            departments.push(new tss.Department(selectedDepartment)
                    .id(p.DepartmentId)
                    .description(p.Description)
            );
        });
        departments.sort(sortFunction);
    };
    return {
        metadata: metadata,
        departments: departments,
        selectDepartment: selectDepartment,
        loadDepartmentsCallback: loadDepartmentsCallback,
        loadDepartments: loadDepartments,
        choices: choices,
        selectedChoice: selectedChoice
    };
})();
tss.vm.loadDepartments();
ko.applyBindings(tss.vm);
});

这是我的HTML

      <select data-bind="options:departments, value:selectDepartment, 
       optionsText: 'description', optionsCaption:'Select a product ...'">
      </select>

此外，排序也没有发生。departmentDataService用于调用外部数据。同时具有"id"answers"description"

我还尝试将值设置为"Id"，但没有成功。

您不应该使用额外的函数selectDepartment将值传递给可观察对象，而是直接将可观察对象绑定到选择框的值属性：

<select data-bind="options:departments, value:selectedDepartment, ...

（记得导出selectedDepartment可观测）

value属性不仅用于在视图与视图模型之间传递当前值，还用于在视图和视图模型之间传达当前值：设置所选选项。因此，绑定到只提供"写入"功能的函数是不够的。

如果你需要对所选部门的变化做出反应，你可以订阅observable（这在官方文档中有解释）。

相关文章：