Knockout multiselect dropdown с отложенной загрузкой

Question

У меня трудности с этим обработчиком, который я частично получил отсюда и частично взломал вместе. Я все еще ориентируюсь на обработчиков, поэтому я предполагаю, что мои проблемы проистекают из-за недостатка понимания.

Я использую этот обработчик в шаблоне, который отображается внутри оператора "если". Когда шаблон включается / исключается, опции включения и выключения дублируются. Это из-за unwrap(valueAccessor()).push(item) линия. Я попытался просто создать массив независимо, а затем установить значение valueAccessors для массива напрямую, но пользовательский интерфейс не отвечает, он работает только путем нажатия элементов.

Как я могу обойти это? Правильно ли я делаю переплет или есть более подходящий способ? Я пометил строку кода комментарием, чтобы указать, где происходит моя проблема.

multiSelectCheck: {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // This will be called when the binding is first applied to an element
            // Set up any initial state, event handlers, etc. here
            var bindings = allBindingsAccessor();
            var ddOptions = unwrap(valueAccessor);
            var selectedOptions = unwrap(bindings.selectedOptions);
            var options = unwrap(bindings.multiselectOptions) || [];
            var optionsCaption = unwrap(bindings.optionsCaption);
            var displaySelected = unwrap(bindings.selectedList) || 5;
            var loadingCaption = unwrap(bindings.loadingCaption);
            var delimiter = unwrap(bindings.splitSelectedBy) || ',';
            var setInitial = unwrap(bindings.setInitialValue);

            // display loader in dropdown
            ko.computed(function () {
                if (unwrap(bindings.loading)) {
                    var spinnerClass = 'fa fa-spinner fa-spin fa-lg';
                    var spinner = loadingCaption || '<span><i class="' + spinnerClass + '"></i> Loading...</span>';

                    // set text to loading
                    $(element).multiselect({ selectedList: 0, noneSelectedText: spinner, selectedText: spinner }).multiselect('disable');
                    $(element).multiselect('refresh');
                }
            }, null, { disposeWhenNodeIsRemoved: element });

            // internal options
            var internal = { selectedList: displaySelected, noneSelectedText: 'Select options', selectedText: '# selected' }

            // merge options with provided options
            options = $.extend(internal, options);

            // pass the original optionsCaption to the similar widget option
            if (optionsCaption) {
                options.noneSelectedText = unwrap(optionsCaption);
            }

            // remove this and use the widget's
            bindings.optionsCaption = '';

            // populate intitial values if available
            if (ddOptions && !ddOptions.length && setInitial) {

                if (selectedOptions) {

                    // create array from value
                    if (typeof selectedOptions == 'string') {
                        selectedOptions = selectedOptions.split(delimiter);
                        selectedOptions = selectedOptions.filter(function (e) { return !!e; }); // filter empty nodes
                        bindings.selectedOptions(selectedOptions);
                    }

                    // add options objects to array of available options
                    for (var i = 0; i < selectedOptions.length; i++) {
                        var item = { Value: selectedOptions[i], Text: '' };
                        //console.log(item);

                        //#### THIS IS THE LINE OF CODE IN QUESTION ####
                        unwrap(valueAccessor()).push(item);
                    }
                }
            }

            // apply multiselect plugin
            var elm = $(element).multiselect(options).multiselectfilter({ filterOnly: true, autoReset: true });

            // refresh the plugin
            $(element).multiselect('refresh');

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                elm.multiselectfilter('destroy').multiselect("destroy");
                $(element).remove();
            });

        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // This will be called once when the binding is first applied to an element,
            // and again whenever the associated observable changes value.
            // Update the DOM element based on the supplied values here.
            var bindings = allBindingsAccessor();
            var selectOptions = unwrap(bindings.multiSelectCheck);
            var selectedOptions = unwrap(bindings.selectedOptions);
            var delimiter = unwrap(bindings.splitSelectedBy) || ',';
            var displaySelected = unwrap(bindings.selectedList) || 5;

            // remove this and use the widget's 
            bindings.optionsCaption = '';

            // handle delimited values
            if (typeof selectedOptions == 'string') {
                selectedOptions = selectedOptions.split(delimiter);
                selectedOptions = selectedOptions.filter(function (e) { return !!e; }); // filter empty nodes
                bindings.selectedOptions(selectedOptions);
            }

            ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            var data = unwrap(valueAccessor());
            var showFilter = (data && data.length > 10) ? 'enable' : 'disable';

            setTimeout(function () {
                var $element = $(element);
                $element.multiselect({ selectedList: displaySelected, noneSelectedText: 'Select options', selectedText: '# selected' }).multiselect('enable').multiselect('refresh').multiselectfilter('refresh');
                $element.multiselectfilter(showFilter);
                $element.multiselect('refresh');
            }, 0);
        }
    }

Answer 1

В итоге моя проблема заключалась в том, что я думал, что у меня есть значение массива, но вместо этого у меня появилось наблюдаемое. Это заставило мою проверку длины массива всегда проходить, поэтому он продолжал добавлять начальные значения.

Я должен был изменить строку инициализации

var ddOptions = unwrap(valueAccessor);

к

var ddOptions = unwrap(valueAccessor()); // added () :/

Answer 2

Попробуйте создать временный массив с элементами и напрямую обновить наблюдаемый массив valueAccessor:

var items = [];
for (var i = 0; i < selectedOptions.length; i++) {
   items.push({ Value: selectedOptions[i], Text: '' });
}

// items
valueAccessor(items);