Проблема получения выпадающего значения с помощью нокаута и начальной загрузки - PullRequest
Новая
       19

Проблема получения выпадающего значения с помощью нокаута и начальной загрузки

0 голосов
/ 08 января 2019

Я только начал использовать нокаут, и у меня возникают проблемы с захватом текущего выбранного значения в моем раскрывающемся списке.

Вот мой пользовательский обработчик, поэтому KO будет работать с bootstrap-selectpicker, и я могу использовать опцию поиска в реальном времени. 

ko.bindingHandlers.selectPicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        if ($(element).is('select')) { 
            if (ko.isObservable(valueAccessor())) {
                ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
            }
            $(element).selectpicker();
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        if ($(element).is('select')) {
            var selectPickerOptions = allBindingsAccessor().selectPickerOptions;
            if (typeof selectPickerOptions !== 'undefined' && selectPickerOptions !== null) {
                var options = selectPickerOptions.options,
                    optionsText = selectPickerOptions.optionsText,
                    optionsValue = selectPickerOptions.optionsValue,
                    optionsCaption = selectPickerOptions.optionsCaption;
                if (ko.utils.unwrapObservable(options).length > 0) {
                    ko.bindingHandlers.options.update(element, options, ko.observable({ optionsText: optionsText, optionsValue: optionsValue, optionsCaption: optionsCaption }));
                }
            }
            if (ko.isObservable(valueAccessor())) {
                ko.bindingHandlers.value.update(element, valueAccessor);
            }
            $(element).selectpicker('refresh');
        }
    }
};

Далее я заполняю раскрывающийся список из своей базы данных. 

  function NewLoanViewModel() {
            var self = this;
            self.waitingLoanDutiesInfo = ko.observable(true);
            self.ErrorFromHandler = ko.observable("");
            self.offices = ko.observableArray([]);

LoadDDLs();

            function LoadDDLs() {
                $.ajax({
                    url: "/LoansX/KO/NewLoansHandler.ashx",
                    cache: false,
                    type: "POST",
                    data: { mode: 'loaddls' },
                    dataType: 'json'
                }).done(function (data) {
                    if (typeof (data.e) != "undefined") {
                        self.ErrorFromHandler(data.e[0].description);
                    }
                    else {
                        ko.mapping.fromJS(data.d[0].offices, {}, self.offices);
                        self.waitingLoanDutiesInfo(false)
                    }
                }).fail(function (jqXHR, textStatus) {
                    self.ErrorFromHandler(textStatus);
                    self.waitingLoanDutiesInfo(false)
                });
            }
}

Вот как выглядит мой выпадающий список: 

            <select class="form-control" data-bind="options: offices(),
            optionsText: 'IDNAME',
            optionsValue: 'ID',
            selectPicker: true"
            data-live-search="true">
            </select>

Наконец, я пытаюсь получить текущее значение моего раскрывающегося списка нажатием кнопки: 

this.NewLoanClick = function () {
var LoanType = this.dgvtypes.optionsValue();
alert(LoanType);
}

До сих пор я пытался сделать NewLoanViewModel.dgvtypes.optionsValue, dgvtypes.optionsValue и т. Д., Но большинство из них дают мне свойство объекта или ошибку метода.

Любые советы будут очень оценены, спасибо.

1 Ответ

0 голосов
/ 08 января 2019

Я не знаком со средством выбора Bootstrap Select, но способ получить выбранный в данный момент параметр из меню выбора просто использует привязку value: 

<select class="form-control" data-bind="
    options: offices(),
    optionsText: 'IDNAME',
    optionsValue: 'ID',
    selectPicker: true,
    value: selectedOffice" data-live-search="true"></select>

Очевидно, вам нужно создать наблюдаемую selectedOffice на вашей модели представления.

Также уверен, что вам на самом деле не нужна большая часть кода в вашем обработчике привязки. Вам нужно вызвать $(element).selectpicker() в методе init, но это должно быть примерно так.

...