Question

我有一个用户可以选择的系列选项，我可以通过一个可观察的数组进行跟踪。数组本身是从一个模型中提供的，我通过Knockout Mapping扩展（ko.mapping.fromJS）将其引入淘汰。一切都很好。

解释这个问题会变得冗长，并且可能会引起更多混淆，看下面的图表：

Situation

基本上：

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

最初 - 我在考虑 - 我只是让用户通过验证添加重复项并处理欺骗 - 如果这是唯一的选项，我可能会回归它。

我发现了“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;
    });
});

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

1 个答案: