1

更新:これが私の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 を実行して何が起こっているかを表示し、リンクで更新する方法を理解できるかどうかを確認します。

4

1 に答える 1

4

独自の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 値も表示されます (説明のために私がバインドしています)。

于 2013-04-30T07:46:05.927 に答える