启用选择控件的某些选项，使用挖空根据对象数组的某些属性禁用其余选项

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

您可以使用计算的可观察量来实现此目的：

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

文档中有一个示例，解释了如何有选择地禁用选择元素中的选项。

您可以创建一个函数，用于将项目与首选状态选项进行比较。呈现每个选项后，通过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绑定(。