禁用/删除通过敲除选项绑定创建的选择选项

Question

我有一系列可供用户选择的选项，我可以通过可观察数组对其进行跟踪。数组本身来自一个模型，我通过 Knockout Mapping 扩展 (ko.mapping.fromJS) 将其引入淘汰赛。一切正常。

解释这将变得冗长，并且可能会导致更多混乱，请参见下图：

基本上：

• 我有一个 Web 输入表单（它是一种配置器）
• 项目列表非常大，我会说可以将 10 个左右的项目添加到配置中
• 当用户添加一个项目时，我将一个默认的“项目 A”推送到绑定到选项的数组中，并且渲染得很好。
• 我试图做的是在项目 A 添加一次后将其从可选择状态中删除。 如果删除了，应该可以重新添加
• 所有这一切发生的方式是通过 KO observables - 一个跟踪可用选项，另一个跟踪“选定”选项。正如我所说，一切正常，我正在尝试根据请求对其进行调整。

最初 - 我在想 - 我会让用户添加重复项并通过验证处理重复项 - 如果这是唯一的选择，我可能会退回到它。

我发现了“Post-processing the generated options”，但提供的示例声明了内联数组，我不确定如何将这种类型的回调附加到我使用映射扩展自动映射的可观察数组。

简而言之，我想知道是否有人知道如何禁用先前的选择（请记住，所有选择都在一个可观察的数组中，而 SELECTED 的在另一个数组中） - 或者这是否不可能我的数据来源。因此，在图像中选择的粉红色注释中 - 我希望只显示“项目 B 和项目 C” - 但如果项目 A 可以禁用，那也可以。

我不知道 DOM 的 jQuery 操作是否可行？它必须在数据绑定之后发生，并且可能会变得混乱。

根据此处的答案 - 我的下一个屏幕有 两个 级联下拉菜单，我正在考虑应用这种独特的选择方法 - 但要组合使用。

一些代码（为保护有罪者而简化）

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 通过选定的项目，并绑定到所有项目数组）：

    <!-- 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 -->

Answer 1

不确定我是否理解正确，但听起来您正在寻找Computed Observables：

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;
    });
});