knockout.js Select2敲除多选设置值问题

nlejzf6q  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(164)

所以我有一个使用Knockout绑定的许多select2下拉列表。最初它看起来工作得很好。当用户进行选择(多选)时。模型被更新,生活很好。当你有来自模型的值,你想默认显示为选中时,我的问题就来了。例如,当编辑某个东西时。你用预先填充的值加载表单。
这是我的绑定处理程序

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor) {
        ko.utils.domNodeDisposal.addDisposeCallback(el,
            function () {
                $(el).select2('destroy');
            });

        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);

        $(el).select2(select2);
    },
    update: function (el, valueAccessor, allBindingsAccessor) {
        var allBindings = allBindingsAccessor();

        if ("value" in allBindings) {
            if ((allBindings.select2.multiple || el.multiple) && allBindings.value().constructor !== Array) {
                $(el).val(allBindings.value().split(',')).trigger('change');
            } else {
                $(el).val(allBindings.value()).trigger('change');
            }
        } else if ("selectedOptions" in allBindings) {
            var converted = [];
            var textAccessor = function (value) { return value; };
            if ("optionsText" in allBindings) {
                textAccessor = function (value) {
                    var valueAccessor = function (item) { return item; }
                    if ("optionsValue" in allBindings) {
                        valueAccessor = function (item) { return item[allBindings.optionsValue]; }
                    }
                    var items = $.grep(allBindings.options(), function (e) { return valueAccessor(e) === value });
                    if (items.length === 0 || items.length > 1) {
                        return "UNKNOWN";
                    }
                    return items[0][allBindings.optionsText];
                }
            }
            $.each(allBindings.selectedOptions(),
                function (key, value) {
                    converted.push({ id: value, text: textAccessor(value) });
                });
            $(el).select2("data", converted);
        }
        $(el).trigger("change");
    }
};

selectedoptions被绑定到一个GUID列表。这是javascript端的一个字符串列表。因为我相信Select2 select需要字符串才能设置所选的值。
我的选择如下:

<select class="form-control input-sm multi-select" data-bind="selectedOptions: BrandIds, options: Brands,  valueAllowUnset: true, optionsText:'Description', optionsValue: 'Value', select2:{ placeholder: 'Please Select...', allowClear: true, multiple:'multiple'}, css: { 'jackpot-input-error': BrandIds.error() && BrandIds.isModified() }" multiple></select>

所以我发现从服务器返回的BrandIds中的初始值被删除了。我在BrandIds的subscribe中确定了这一点。subscribe函数的参数如下所示

[
{
    "status": "deleted",
    "value": "cd1f6c04-b7ae-479e-b722-65f837e65ec2",
    "index": 0
},
{
    "status": "deleted",
    "value": "bd66ebe1-080b-4455-9094-bf0464d4adbf",
    "index": 1
}

]

nwo49xxi

nwo49xxi1#

我已经删除了绑定处理程序的整个update部分,这似乎毫无意义。Knockout将处理optionsTextoptionsValue绑定。
Knockout操作原来的<select>元素,它隐藏在后台,select2注意到这些操作并相应地更新它的小部件,似乎真的没有任何干预的必要。
注意下面的示例中的两个选项是如何从视图模型的初始状态中预先选择的。当您通过自己的函数更改BrandIds可观察数组中的项时,例如在 AJAX 请求后,应该会发生同样的事情。
第一个

rekjcdws

rekjcdws2#

因此,它与knockout或select2无关。我们建立了一个自定义连接,并将其发送到前端以绑定到我们的select。这里的字符串值是guid的大写字符串表示。用于绑定到selectedOptions的BrandId包含了一个guid列表,这些guid都是小写。因此,它归结为值不同的情况。

相关问题