启用选择控件的某些选项，使用敲除基于对象数组的某些属性禁用其余选项

Question

我是淘汰新手，想使用一个选择表单控件并根据数组中对象的属性启用一些选项绑定到选择控件。

绑定到选择表单控件的对象数组如下：

soldRequestBuyerType = 
[{id: 0, description: "Highest Bidder at Auction", status: "false"}
{id: 1, description: "Nominate Another Buyer", status:"true"}
{id: 2, description: "Book to Selling Agent", status:"true"}];

如果绑定对象的 status 属性为 true，则应启用该选项以进行选择，如果为 false，则应禁用该选项。

请帮助我使用敲除提供与选择控件的绑定。

Answer 1

您可以使用计算的 observable 来完成此操作：

function ViewModel() {
    var vm = this;

    vm.soldRequestBuyerType = [
        { id: 0, description: "Highest Bidder at Auction", status: false },
        { id: 1, description: "Nominate Another Buyer", status: true },
        { id: 2, description: "Book to Selling Agent", status: true }
    ];

    vm.availableSoldRequestBuyerType = ko.pureComputed(() => {
        return vm.soldRequestBuyerType.filter((value) => value.status);
    });
}

工作小提琴：https://jsfiddle.net/thebluenile/p86La5d3/

如果您愿意，您实际上也可以使 status 属性可观察，然后选择菜单将在这些更改时自动更新。

Answer 2

example in the docs 解释了如何选择性地禁用选择元素中的选项。

您创建一个函数，将项目与您的首选状态选项进行比较。呈现每个选项后，您可以通过 disable 绑定应用它。

这是一个展示它的例子：

const statusOptions = [ "all", "true", "false" ];
const statusFilter = ko.observable("true");

const optionsData =  [
  {id: 0, description: "Highest Bidder at Auction", status: "false"},
  {id: 1, description: "Nominate Another Buyer", status:"true"},
  {id: 2, description: "Book to Selling Agent", status:"true"}
];

const setOptionDisable = function(option, item) {
  ko.applyBindingsToNode(option, { 
    disable: ko.pureComputed(
      () => statusFilter() !== "all" && item.status !== statusFilter() 
    )
  }, item);
};

ko.applyBindings({ 
  statusOptions, statusFilter, optionsData, setOptionDisable
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  Show :<select data-bind="options: statusOptions, value: statusFilter">
  </select>
</div>

<select size=3 data-bind="
    options: optionsData,
    optionsText: 'description',
    optionsAfterRender: setOptionDisable">
</select>

另一种方法是直接在数据中添加disabled 属性，并使用foreach 绑定“手动”呈现options（即不使用options 绑定）。