javascript - 如何使用预定义的文本和值选项定义自定义 knockout 'options binding'

Question

我们环境中的一个典型场景是允许用户选择服务器提供的选项列表(终端、产品、..)，然后呈现请求的数据。

服务器提供的选项是名称，ID格式，因此经常使用以下 knockout 结构:

<select data-bind="options: serverOptions, optionsText: 'Name', optionsValue: 'ID', value: selectedOption>

最好创建一个名为“NamedIdOptions”的自定义绑定(bind)处理程序，在 allBindingsAccessor() 上指定 optionsText 和 optionsValue，然后重定向到标准选项绑定(bind)处理程序。

即

<select data-bind="NamedIdOptions: serverOptions, value: selectedOption"></select>

以前，我已经创建了自己的绑定(bind)处理程序来填充我自己的选项 - 但是，我更愿意使用选项绑定(bind)处理程序提供的框架。

我尝试了不同的方法，但都不太成功 - 选项绑定(bind)使用 allBindings['optionsValue'] 和 allBindings['optionsText'] 来访问值，而且我似乎无法设置这些。 (我想避免使用 applyBindingsToNode 方法并按照以下方式编写一些内容:

ko.bindingHandlers.NamedIdOptions = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
        var allBindings = allBindingsAccessor();
        allBindings.*FORCESET*("optionsText", "Name");
        allBindings.*FORCESET*("optionsValue", "ID");

        retun ko.bindingHandlers.options.init.apply(this, arguments);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel)
    {
        retun ko.bindingHandlers.options.update.apply(this, arguments);
    }
}

但是，我似乎无法在 allBindings 上设置任何内容。

我不允许使用

allBindings['_ko_property_writers']['optionsText']("Name" );
allBindings['_ko_property_writers']['optionsValue']("ID" );

我真的更愿意避免在 init 构造中使用 applyBindingsToNode

Knockout - is it possible to combine standard select bindings with a custom binding?

现在有人能提供解决问题的简单方法吗？

Answer 1

您可以考虑使用 ko.applyBindingAccessorsToNode。这就是我在 KO 3.0 中开始这样做的方式:

ko.bindingHandlers.NamedIdOptions = {
    init: function(element, valueAccessor, allBindingsAccessor)
    {
        var injectedBindingValues = {        
            options: valueAccessor,
            optionsValue: function () { return "ID" },
            optionsText: function () { return "Name" }
        };

        ko.applyBindingAccessorsToNode(element, injectedBindingValues);

        //tell Knockout that we have already handled binding the children of this element
        //
        return { controlsDescendantBindings: true };        
    }
}

您可以在 this fiddle 中看到它的实际效果.

注意:我通常使用从服务器(C#、JSON.NET)发送的 JSON 模式来自动从 C# 属性或数据库模式元数据填充 UI 中的选项。我提炼了我的代码并对其进行了更改以匹配 OP 为实现问题的连续性所做的工作。但是，如果对 JSON 模式技术有任何兴趣，请联系我，我可以将其发布。