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

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

    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/

您将在每次选择后看到您的提醒，并在第3列中看到RequestType值（由我绑定仅用于说明）。

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

1 个答案: