如何使用预定义的Text和Value选项定义自定义挖空'选项绑定' [英] How do define a custom knockout 'options binding' with predefined Text and Value options

问题描述

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

A typical scenario in our environment is to allow the user to select a list of options provided by the server (terminals, products, ..), and then present the requested data.

服务器提供的选项是Name，ID格式，因此以下的淘汰结构经常使用：

The options provided by the server is in Name, ID format, and thus the following knockout construct is used all to often:

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

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

It would be desirable to make a custom bindingHandler, called 'NamedIdOptions' specifying optionsText and optionsValue on the allBindingsAccessor() and then redirect to the standard options binding handler.

ie

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

以前，我已经制作了自己的绑定处理程序，填写了我的选项自我 - 然而，我更愿意使用选项绑定处理程序提供的框架。

Previously, I have made own binding handler which fills in the options my self - however, I would prefer to use the framework provided by the options binding handler.

我尝试了不同的方法而没有太多成功 - 选项绑定使用allBindings ['optionsValue']和allBindings ['optionsText ']访问该值，似乎我无法设置这些。 （我想避免使用applyBindingsToNode方法并写下以下内容：

I have tried different approaches without too much success - the options binding uses allBindings['optionsValue'], and allBindings['optionsText'] to access the value, and it seems that I have no way of setting these. (I would like to avoid applyBindingsToNode approach used in and write something along the lines of:

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上设置任何内容。

However, it seems like I have no possiblity to set anything on the allBindings.

我不被允许使用

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

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

I would really prefer to avoid applyBindingsToNode in the init construct as

淘汰赛 - 是否可以将标准选择绑定与自定义绑定结合起来？

现在有人想解决这个问题的简单方法吗？

Does anyone now about a simple solution to the problem?

推荐答案

好的 - 我最后还是对节点应用了绑定：

Okay - I ended up using apply bindings to node anyway:

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

       delete allBindings.NamedIdOptions;
       ko.utils.extend(newBindingOptions, allBindings);

       ko.applyBindingsToNode(element, newBindingOptions, viewModel);
    }
};

它似乎按预期工作 - 我对价值和selectOptions有点不确定 - 哪个有'后'设置选项。我想在绑定值之前对NamedIdOptions进行计划时我是安全的吗？

And it seems to work out as expected - I am a bit unsure about the value and selectedOptions - which have 'after' set to options. I guess I am safe when the NamedIdOptions is plaved before the value binding?

这篇关于如何使用预定义的Text和Value选项定义自定义挖空'选项绑定'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！