Question

所以这是一个有趣的问题，我遇到了淘汰赛，需求和选择2。我不得不分享，因为这花了很长时间才弄明白。我试图做的是从一个可观察的数组创建一个动态创建的select2选择列表。该数组包含一个名为Id的项目。选择列表如下所示：

<select data-bind="
          options: $root.Items,
          optionsValue: 'Id', 
          optionsText: 'FullName', 
          value: Id,
          select2: {}"></select>

绑定处理程序如下所示：

ko.bindingHandlers.select2 = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var obj = valueAccessor(),
                allBindings = allBindingsAccessor(),
                lookupKey = allBindings.lookupKey;
            $(element).select2(obj);
            if (lookupKey) {
                var value = ko.utils.unwrapObservable(allBindings.value);
                $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) {
                    return item[lookupKey] === value;
                }));
            }

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).select2('destroy');
            });
        },
        update: function (element) {
            $(element).trigger('change');
        }
    };

我遇到的问题是这个。当我从动态创建的选择列表中选择一个新项时，永远不会调用update方法。所以，我必须做的是：

<select data-bind="
              options: $root.Items,
              optionsValue: 'Id', 
              optionsText: 'FullName', 
              value: Id,
              select2: Id"></select>

处理的绑定需要更改为：

ko.bindingHandlers.select2 = {
            init: function(element, valueAccessor, allBindingsAccessor) {
                var obj = valueAccessor(),
                    allBindings = allBindingsAccessor(),
                    lookupKey = allBindings.lookupKey;
                $(element).select2({});

                if (lookupKey) {
                    var value = ko.utils.unwrapObservable(allBindings.value);
                    $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function(item) {
                        return item[lookupKey] === value;
                    }));
                }

                ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                    $(element).select2('destroy');
                });
            },
            update: function (element, valueAccessor, allBindingsAccessor) {
                $(element).on("change", function () {
                    var id = $(this).val();
                    var valAccesor = valueAccessor();
                    if (valAccesor && id && id > 0)
                        valAccesor(id);
                });
            }
        };

正如你所看到的，我不得不告诉init函数通过传入一个空白对象{}从头开始创建一个select2对象，并且必须通过传入Id作为observable来告诉update函数哪个observable是可以监听的。听。现在，当底层选择列表更改事件触发时，我告诉Id observable更新。

我希望这可以帮助其他人，因为我有许多日夜不停地敲打屏幕试图弄清楚为什么底层选择不会触发自定义绑定处理程序上的更新方法。

请原谅任何拼写错误或代码错误......如果有人发现问题，我会更新，而且我总是愿意听到任何其他更优雅的解决方案......我还没找到。

淘汰，需要和选择2

0 个答案: