잘못된 BindingHandler가 호출 됨

드롭 다운이 변경 될 때 잘못된 바인딩 처리기가 호출되는 매우 이상한 문제가 있습니다. jQuery 1.9.1과 함께 Knockout 3.1을 사용하고 있습니다. 직원을 쉽게 찾을 수 있도록 일련의 계단식 드롭 다운이 있습니다.

여기에 무슨 일이 벌어집니다. 페이지가로드되면 각 핸들러가 예상대로 호출됩니다. 나는의 값을 변경하면 하지,라고 처리기를 예상대로. 드롭 다운 을 제대로 채우기 위해 호출해야하는 전혀 호출되지 않습니다 . 그러나 변경하면 , 가 호출되고 예상대로 작동합니다.#AssignedDepartmentserviceAreaSelectdepartmentSelectdepartmentSelect#AssignedServiceAreaName#AssignedServiceAreaNameserviceAreaSelect

여기서 무슨 일이 벌어 질까요? 이 코드는 Knockout 2.x에서 잘 작동했습니다.

다음은 세 개의 연속 드롭 다운에 대한 세 가지 핸들러 중 두 가지입니다.

// Department Selected
ko.bindingHandlers.departmentSelect = {
    update: function (element, valueAccessor, allBindingsAccessor, vm) {
        var el = $(element).find("option:selected");
        console.log("Department Selected: ", el.val());
        if (el.length > 0) {
            vm.deptName(el.text());
            $.get('/customerservice/jsonproxy/servicearealist', { deptID: el.val() }, function (response) { vm.ServiceArea(response); }, 'json');
        }
    }
}

// Service Area Selected
ko.bindingHandlers.serviceAreaSelect = {
    update: function (element, valueAccessor, allBindingsAccessor, vm) {
        var el = $(element).find("option:selected");
        console.log("Service Area Selected: ", el.val());
        if (el.length > 0) {
            vm.ServiceAreaName(el.text());
            $.get('/customerservice/jsonproxy/employeelist', { deptID: vm.deptID, serviceAreaID: el.val() }, function (response) {
                vm.EmployeeList(response[0].Employees);
                vm.EmployeeList.unshift({ EmployeeName: "None Assigned", EmployeeID: "" });
            }, 'json');

        }
    }
};

다음은 HTML입니다.

<div class="row-fluid">
<div class="span4">

    @Html.MyLabelFor(m => m.Department, new { @class = "control-label" })

    <select class="span12" id="AssignedDepartment" name="AssignedDepartment" 
        data-bind="options: dept, optionsCaption: 'Select a department', optionsValue: function (item) { return item.DepartmentID }, optionsText: function (item) { return item.DepartmentName; }, value: deptID, departmentSelect: deptID"></select>
    <span data-bind="text: deptID"></span><span data-bind="    text: deptName"></span>
    @Html.HiddenFor(m => m.Department, new { data_bind = "value: deptName" })
    @Html.HiddenFor(m => m.DepartmentCode, new { data_bind = "value: deptID" })

</div>
<div class="span4">

    @Html.MyLabelFor(m => m.ServiceArea, new { @class = "control-label" })

    <select class="span12" id="AssignedServiceAreaName" name="AssignedServiceArea" data-bind="options: ServiceArea, optionsCaption: 'Select a Service Area', optionsValue: function (item) { return item.ServiceAreaID; }, optionsText: function (item) { return item.ServiceAreaName; }, value: ServiceAreaID, serviceAreaSelect: ServiceAreaID"></select>
    @Html.HiddenFor(m => m.ServiceArea, new { @data_bind = "value: ServiceAreaName" })
    @Html.HiddenFor(m => m.ServiceAreaCode, new { @data_bind = "value: ServiceAreaID" })
    @*<span data-bind="text: ServiceAreaID"></span><span data-bind="    text: ServiceAreaName"></span>*@

</div>
<div class="span4">

    @Html.MyLabelFor(m => m.Employee, new { @class = "control-label" })

    <select class="span12" id="AssignedEmployee" name="AssignedEmployee" data-bind="options: EmployeeList, optionsCaption: 'None Assigned', optionsValue: function (item) { return item.EmployeeID; }, optionsText: function (item) { return item.EmployeeName; }, value: EmployeeID, employeeSelect: EmployeeID"></select>
    @*<span data-bind="text: EmployeeID"></span><span data-bind="    text: EmployeeName"></span>*@
    @Html.HiddenFor(m => m.Employee, new { data_bind = "value: EmployeeName" })
    @Html.HiddenFor(m => m.EmployeeID, new { data_bind = "value: EmployeeID" })

</div>
</div>