Выберите элемент, который не обновляется правильно с Knockout - PullRequest
Новая
       6

Выберите элемент, который не обновляется правильно с Knockout

0 голосов
/ 25 февраля 2019

Фон

У меня есть ситуация, когда я хочу иметь несколько выпадающих меню, которые меняют параметры в зависимости от того, что доступно.Мне удалось упростить этот код и повторить проблему с кодом ниже.

В этом примере у меня есть 5 доступных цветов, и я хочу выбрать четыре из них.Если я выберу одно, то я хочу, чтобы оно не было доступно в других меню.

Задача

Раскрывающиеся меню только вид работы.Показанные параметры кажутся действительными в зависимости от того, что доступно, однако иногда при выборе записи это не разрешается, пока я не выберу второй раз.Кроме того, как видно из приведенного ниже комментария, код lodash _.sortBy, по-видимому, полностью нарушает функциональность.

HTML 

<div data-bind="foreach:colorChoices">
  <select data-bind="options: localAvailableOptions, optionsCaption: 'Select...', optionsText: function(currentValue) {return 'Color ID ' + currentValue;}, value: id"></select>
</div>

Javascript 

function appModel() {
    var self = this;
    self.colorIds = [1, 2, 3, 4, 5];
    self.colorChoices = ko.observableArray();

    self.selectedColorIds = ko.computed(function() {
        return _(self.colorChoices())
            .filter(function(item) {
                return item.id()
            })
            .map(function(item) {
                return item.id()
            })
            .value();
    });

    self.availableColorIds = ko.computed(function() {
        return _.difference(self.colorIds, self.selectedColorIds());
    });

    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
}

function colorChoice(parent) {
    var self = this;
    self.id = ko.observable();
    self.localAvailableOptions = ko.computed(function() {
        //clone as to not modify original array
        var availableIds = _.clone(parent.availableColorIds());
        //add own ID so dropdown menu contains matching entry
        if (self.id()) {
            availableIds.push(self.id());
        }
        //seems to break with _.sortBy
        //return _.sortBy(availableIds);
        return availableIds;
    });
}

ko.applyBindings(new appModel());

CodePen (тот же код)

https://codepen.io/anon/pen/KEKPKV

1 Ответ

0 голосов
/ 25 февраля 2019

Я обнаружил проблему. 

if (self.id()) {
    availableIds.push(self.id());
}

В ней отсутствовала проверка, чтобы увидеть, существует ли она, и это означало, что доступные опции содержали дублирующиеся значения, что, вероятно, приводило к неопределенному поведению.

...