knockout.js - 禁用/删除通过 knockout 选项绑定(bind)创建的选择选项

Question

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

解释这一点会变得冗长，并且可能会导致更多困惑，请参见下图:



基本上:

我有一个网络输入表单(它是一种配置器)

项目列表非常大，我会说 10 左右可能的项目可以添加到配置中

当用户添加一个项目时，我将一个默认的“项目 A”推送到绑定(bind)到选项的数组中，并且它被渲染得很好。

我正在尝试做的是在添加一次后将项目 A 从可选择状态中删除。 如果删除了应该可以重新添加

所有这一切发生的方式是通过 KO observables - 一个跟踪可用选项，另一个跟踪“选定”选项。正如我所说，一切正常，我正在尝试根据请求对其进行调整。

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

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

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

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

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

部分代码(为保护有罪而简化)

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，并绑定(bind)到所有项目数组):

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