0

私のモデル内には、観察可能な要素を持つオブジェクト配列があります。次のドロップダウン (カスケード ドロップダウン) に入力するために、これらの要素 (ドロップダウン リスト) の 1 つを購読しています。これらのドロップダウンで選択した値の説明を取得する必要があります。ドロップダウンリストからその値を取得するにはどうすればよいですか? 可能であれば、サーバーに対してクエリを実行しないようにしています。

過去に行ったことはありますself.deptName($('#AssignedDepartment option:selected').text());が、現在、このドロップダウンは一意ではありません。たくさんの中から選ぶことができました。uniqueName: true各フィールドで使用しています。サブスクライブ内で、どのドロップダウンが変更されたかをどのように判断しますか?

私のサブスクライブは次のようになります。

    // Build the hours types when the request type is selected
    self.RequestType.subscribe(function (newValue) {
        FindRequestType(newValue, function (record) {
            // Do stuff
        });
    });

ドロップダウンの HTML は次のとおりです。

<select class="required span12" data-bind="leaveTypeDropDown: RequestType, uniqueName: true"></select>

これが bindingHandler です。

ko.bindingHandlers.leaveTypeDropDown = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // If we don't have the leave request dropdown data, pull it.
        if (jsonRequestType === "") {
            $.ajax({
                'async': false,
                'url': '/api/payroll/LeaveRequestTypes/',
                'dataType': 'text json',
                'type': 'GET',
                'success': function (json) {
                    jsonRequestType = json;
                    jsonRequestTypeRecieved = true;
                }
            });
        }

        // 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 the value from the previous record if there is one.
        if (selectedRequestType !== null) {
            element.value = selectedRequestType;
            ko.utils.triggerEvent(element, 'change');
            selectedRequestType = null;
        }
    }
};

更新 1:混乱があるため。ドロップダウンリストで「Vacation」というテキストを含む値「VAC」を選択した場合。モデルに "Vacation" というテキストを入れるにはどうすればよいですか?

更新 2:これは、上記の (ほとんどの) 作業コードを含む jsFiddle です。http://jsfiddle.net/MikeWills/cykuqxto/6/何らかの理由で、読み込み時にドロップダウンが機能しませんが、別の日を追加すると、機能するドロップダウンが表示されます。

4

1 に答える 1

1

あなたのアプローチを少しクリーンアップする必要があります。まず、モデルに必要なすべてのオブザーバブルを作成し、ajax 呼び出しで最初のドロップダウンの選択肢を設定しましょう。

var viewModel = {
    firstDropDownOptions: ko.observableArray(),
    firstDropDownChoice: ko.observable()
};

$.ajax(...).done(function (data) {
    // process data and assign
    // for the binding below to work, processedData has to have items like this:
    // {textProperty: 'some text', otherProperty: ...}
    // as you said in a comment, you have option groups so I'm going to assume
    // processedData looks like this overall:
    // [{group: 'one', options: [{text: 'Vacation', value: 'VAC'}, ...]}, ...]
    viewModel.firstDropDownOptions(processedData);
});

次に、 options bindingを使用して、そのオブザーバブルをドロップダウンにバインドしましょう。 

<select data-bind="foreach: firstDropDownOptions, value: firstDropDownChoice">
    <optgroup data-bind="attr: {label: label}, foreach: options">
        <option data-bind="text: text, option: $data"></option>
    </optgroup>
</select>

これは KnockoutJS からのカスタム バインディングを使用しています - optgroup および javascript オブジェクトを使用した select のバインディング値:

ko.bindingHandlers.option = {
    update: function(element, valueAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor());
       ko.selectExtensions.writeValue(element, value); // note this is magic
    }        
};

最後に、この最初のドロップダウンへの変更を監視するオブザーバブルにサブスクライブしましょう。

viewModel.firstDropDownChoice.subscribe(function (newChoice) {
    // in this function, newChoice is the option selected in the first drop down,
    // but not just the value, the whole object, so you can do:
    console.log(newChoice, newChoice.text);
});
于 2014-09-16T22:31:43.033 に答える