用于 knockout.js 中自定义下拉框的自定义 bindingHandler

Question

更新：这是我的jsFiddle。

我的下拉菜单的自定义处理程序有问题。我不能在事件上使用 .subscribe() 来触发填充我的其他下拉列表（在级联下拉列表中）。我正在为我们的休假申请系统构建休假类型列表。这一切都驻留在每个请求的多天表中。我的 JSON 看起来像：

[{
"Id": 4,
"Title": "Comp Time Used",
"ParentId": 0,
"ChildRequired": false,
"HourTypeCodes": [{
    "Id": "07",
    "Title": "COMP TIME USED"
}, {
    "Id": "35",
    "Title": "COMP TIME USED WWTP"
}]
}, , {
"Id": 1,
"Title": "Vacation",
"ParentId": 1,
"MapToCode": "04"
"ChildRequired": true,
"HourTypeCodes": [{
    "Id": "04",
    "Title": "VACATION"
}]
}, {
"Id": 24,
"Title": "Vacation",
"ParentId": 1,
"MapToCode": "04",
"ChildRequired": false,
"HourTypeCodes": [{
    "Id": "04",
    "Title": "VACATION"
}]
}, {
"Id": 25,
"Title": "Vacation Adjust - Fire",
"ParentId": 1,
"MapToCode": "45",
"ChildRequired": false,
"HourTypeCodes": [{
    "Id": "45",
    "Title": "VAC-FIRE-ADJUST."
}]
}

这将创建一个类似于以下内容的下拉列表：

<select name="RequestType[]" data-bind="leaveTypeDropDown: RequestType()"><option value="">(Select)</option><option value="4">Comp Time Used</option><optgroup label="Vacation"><option value="24">Vacation</option><option value="25">Vacation Adjust - Fire</option></optgroup></select>

然后这会构建另一个下拉列表，用户可以选择小时类型（在少数情况下有一个选项。在“Comp Time”的情况下，您可以选择“Comp Time Used”或“Comp Time Used WWTP” （我不明白的特殊工资单）。

我正在将我的项目从较旧的 MVC 2 应用程序迁移到基于 knockout.js 的表单。在旧的应用程序中，我可以使用这个函数来创建下拉列表：

    function LoadRequestType(obj) {
        var items = "<option value=''>(Select)</option>";
        var savedParent = 0;
        $.each(jsonRequestType, function (i, item) {
            if ((savedParent != item.ParentId) && (savedParent != 0))
                items += "</optgroup>";
            if (item.ChildRequired)
                items += "<optgroup label='" + item.Title + "'>";
            else {
                items += "<option value='" + item.Id + "'";
                if ($(obj).prev("input").val() == item.Id)
                    items += " selected";
                items += ">" + item.Title + "</option>";
            };
        });
        $(obj).html(items);
    }

我可以像淘汰赛一样运行这个函数

    ko.bindingHandlers.leaveTypeDropDown = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
           // Fill the drop down list.
            LoadRequestType(element);
        }
    };

它会创建下拉菜单。但是当我更改一个值并在该值上有一个 .subscribe() 时，从那里什么也没有发生。我猜是缺少某种触发器，我只是不知道是什么。

这是我尝试过的：

        function LeaveDay(dateOfLeave, timeOfLeave, hoursRequested, requestType, relationship, natureOfIllness, timesheetCode, isAllDay) {
            var self = this;
            // trimmed to only show relavant code
            self.RequestType = ko.observable(requestType);

            self.RequestType.subscribe(function (newValue) {
                alert("test");
            });
        }

        function DayViewModel() {
            var self = this;
            self.days = ko.observableArray([
                new LeaveDay(new Date().toString("MM/dd/yyyy"), "8:00 am", 8, 0, "", "", 0, "", true)
            ]);
        }

有什么想法吗？

我会看看我是否能弄清楚如何做一个 jsFiddle 来显示正在发生的事情并使用链接进行更新。

Answer 1

为您的<select>注册自己的change事件回调：

    ko.bindingHandlers.leaveTypeDropDown = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Fill the drop down list.
            LoadRequestType(element);

            // register event handler where bound observable will be changed
            ko.utils.registerEventHandler(element, 'change', function(){
                var observable = valueAccessor();
                observable(element.value);
            });
        }
    };

并且不要忘记更改您的标记（() 已剥离）：

<select name="RequestType[]" data-bind="leaveTypeDropDown: RequestType">

修改过的小提琴：http://jsfiddle.net/XRUFf/29/

您将在每次选择后看到您的警报，以及第三列中的 RequestType 值（由我绑定只是为了说明）。