Связывание опций KnockoutJS с повторяющимися значениями

Question

Я создаю простое приложение с Knockout.js в качестве доказательства концепции.Поскольку я очень новичок в Knockout, код в этом вопросе может быть далек от совершенства и демонстрировать плохие практики, поэтому не стесняйтесь, дайте мне знать, если это так!

Я использую options привязка для создания содержимого элемента select:

<select data-bind="options: titles, optionsText: 'display', optionsValue: 'value'">
</select>

Модель представления выглядит следующим образом:

var ViewModel = function() {
    this.titles = ko.observableArray([]);
};

На DOM ready я нажимаю некоторыезначения в этот наблюдаемый массив (каждое значение является литералом объекта, представляющим «заголовок», например, «Mr», «Mrs» и т. д.):

var data = [
    { value: "Mr", display: "Default Value" },
    { value: "Miss", display: "Miss" },
    { value: "Mr", display: "Mr" },
    { value: "Ms", display: "Ms" }
];
ko.applyBindings(view);
for(var i = 0; i < data.length; i++) {
    view.titles.push(data[i]); //Push titles into observable array
}

Не спрашивайте, почему существуют два объекта сЗначение «Мистер» - вот как поступают данные, с которыми мне приходится иметь дело.Я не могу это изменить.Тем не менее, это то, что вызывает проблему.Я ожидаю, что первый объект будет представлять выбранную опцию, но это не так.Третий объект представляет элемент option, который фактически заканчивается выбором по умолчанию.

Я полагаю, это связано с тем фактом, что наблюдаемый массив вызывает добавление элементов option к элементу DOM путемодин, как цикл повторяется.Knockout пытается сохранить выбранный параметр, проверив его значение.После первой итерации выбранный option имеет значение «Mr».После третьей итерации есть еще option со значением "Mr", поэтому Knockout считает, что это был ранее выбранный параметр, и выбирает его.

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

Мой вопрос: как можно предотвратить такое поведение?

Answer 1

Почему вы помещаете элементы в массив один за другим?Вы можете просто сделать:

view.titles(data);

вместо

for(var i = 0; i < data.length; i++) {
    view.titles.push(data[i]); //Push titles into observable array
}

Это также решит вашу проблему - первый элемент будет выбран по умолчанию.Кроме того, если вы не планируете добавлять новые элементы в этот массив, вы можете использовать ko.observable вместо ko.observableArray

UPDATE: Knockoutjs, похоже, не нравится несколько опций с одинаковым значением.Мой код не будет работать должным образом, если вы добавите привязку значения к тегу выбора (он выберет третий элемент, а не первый).Однако, поскольку knockoutjs позволяет вам получить доступ к выбранному объекту (через привязку значения), вы можете удалить привязку optionsValue и значение доступа через привязку значения: jsfiddle.net/ej9Ue/1