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


У меня есть ряд опций, которые пользователь может выбрать, которые я могу отслеживать через наблюдаемый массив. Сам массив подается из модели, которую я привожу в knockout через расширение Knockout Mapping (ko.отображение.fromJS). Все работает нормально.

Объяснение этого будет многословным и может вызвать еще большую путаницу, чтобы увидеть диаграмму ниже:

Ситуация

В основном:

  • у меня есть форма веб-входа (своего рода конфигуратор)
  • список элементов довольно большой, я бы сказал, что 10 или около того возможных элементов могут быть добавлены в конфигурацию
  • Когда пользователь добавляет элемент, я помещаю стандартный "элемент A" в массив, связанный с опциями, и он отображается просто отлично.
  • то, что я пытаюсь сделать, - это удалить элемент A из выбора после того, как он был добавлен один раз. если он будет удален, его можно будет добавить заново
  • все это происходит с помощью ko observables-один для отслеживания доступных вариантов, а другой для отслеживать" выбранные " параметры. Как я уже сказал, Все работает нормально, и я пытаюсь настроить его на основе запроса.

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

Я обнаружил " постобработку сгенерированных опций ", но приведенный пример объявляет массив в строке, и я не уверен, как я могу присоединить этот тип вызова обратно к наблюдаемому массив я Автодруг, использующие расширение картирования.

В двух словах, мне интересно, есть ли у кого - нибудь идея о том, как отключить предыдущий выбор (помните, что все выборки находятся в одном наблюдаемом массиве, а выбранные-в другом) - или это невозможно, учитывая источник моих данных. Поэтому в ярко-розовой выбранной аннотации на изображении-я бы в идеале хотел, чтобы отображались только "пункт B и пункт C" - но если пункт A может быть отключен, это тоже будет работать.

Я не знаю. знаете, если jQuery манипуляции с DOM будет жизнеспособным? Это должно произойти после привязки данных, и может стать грязным.

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

Некоторый код (упрощенный для защиты виновных)

public class ItemsModel
{
  public List<ItemTypes> ItemTypes{ get; set; }
  public List<SelectedItemTypes> SelectedItemTypes{ get; set; }
}

public class ItemTypes
{
   public int Id { get; set; }
   public string Description { get; set; }
}

public class SelectedItemTypes
{
    public int Id { get; set; }
    public decimal Amount { get; set; }
}

**Javascript / HTML (снова вырезано для соответствующих частей) * *

      self.worksheetitems = ko.mapping.fromJS(@Html.Raw(Model.ToJson()))
      /* Adds an Item */
         self.addItem= function () {
                self.worksheetitems
               .SelectedItemTypes.push({ 'Id': ko.observable(), 
               'Amount': ko.observable(0)});

Html таблица, которая содержит этот материал (обратите внимание на foreach через выбранные элементы и привязку к массиву all items):

    <!-- Items -->
<tbody data-bind=
      "visible: worksheetitems.SelectedItemTypes().length > 0, 
       foreach: worksheetitems.SelectedItemTypes">
          <tr>
              <td>
              <select data-bind=
                      "options: $root.worksheetitems.ItemTypes(), 
                      optionsText: 'Description', 
                      optionsValue: 'Id', value: Id"></select>
              </td>           
           <tr/>
    <!-- Snipped -->

    <button data-bind="click: $root.addItem">Add</button> 
    <!-- Add Another Item -->
1 4

1 ответ:

Не уверен, правильно ли я понял, но похоже, что вы ищете вычисляемые наблюдаемые :

self.AvailableItemTypes = ko.computed(function() {
    var selectedTypeIds = this.SelectedItemTypes().map(function(el) {
        return el.Id; 
    });
    return this.ItemTypes().filter(function(el) {
        return selectedTypeIds.indexOf(el.Id) === -1;
    });
});