Bootstrap-multiselect: KnockoutJS 객체 값 바인딩(단순 값 아님) ... 해킹 수정 포함

전체 개체가 문자열이 아닌 값으로 바인딩되는 녹아웃 선택 바인딩을 사용하고 있습니다.

bootstrap-multiselect는 드롭다운 목록 항목을 해당 선택 옵션과 다시 연결하기 위해 "값"을 사용하기 때문에 이것을 좋아하지 않았습니다. 이를 수행하려면 녹아웃 바인딩에 "optionsValue" 속성을 설정하여 옵션에 "값" 속성이 있도록 해야 합니다. 그러나 "optionsValue" 속성을 설정하면 전체 객체가 아닌 내 selectedOptions observableArray에서 해당 값만 설정하는 예상 결과가 나타납니다.

옵션을 전체 개체에 바인딩할 수 있는 녹아웃 내 기능을 사용하는 유일한 사람이 나일 가능성이 매우 높지만 그렇지 않은 경우를 대비하여... 여기 해킹 수정 사항이 있습니다.

"optionsKey" 및 "observableKey"라는 두 개의 새로운 부트스트랩 다중 선택 옵션을 생성하여 관련될 수 있는 값을 어디로 가야 하는지 알 수 있습니다.

<select id="mySelect" data-bind="options: myOptions, selectedOptions: mySelectedOptions, optionsText: 'myDisplayText', optionsAfterRender: SetOptionKey, multiselect: { optionsKey: 'data-key', observableKey: 'Key' }" multiple="multiple"></select>

내 녹아웃 보기 모델에서 각 옵션에 대해 "optionsKey"가 참조하는 속성을 설정했습니다.

myVM.SetOptionKey = function ( option, item ) {
    ko.applyBindingsToNode( option, { attr: { "data-key": item.Key } }, item );
};

이제 bootstrap-multiselect.js 파일을 살펴보겠습니다. 여기에서 가장 먼저 해야 할 일은 녹아웃 초기화 처리기를 추가하는 상단에 있는 것입니다.

init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    ...
    if (allBindings.has('selectedOptions')) {
        var selectedOptions = allBindings.get('selectedOptions');
        if (ko.isObservable(selectedOptions)) {
            ko.computed({
                read: function () {
                    selectedOptions();

                    // Added to handle knockout binding to an object...not just a value
                    // multiselect needs the selected property on the options, else it wont show them on refresh
                    if ((config.optionsKey !== undefined) &&
                        (config.optionsKey !== null) &&
                        (config.optionsKey.length > 0) &&
                        (config.observableKey !== undefined) &&
                        (config.observableKey !== null) &&
                        (config.observableKey.length > 0)) {
                        var _optionsKey = config.optionsKey;
                        var _observableKey = config.observableKey;
                        ko.utils.arrayForEach(selectedOptions(), function (selectedOption) {
                            $("option[" + _optionsKey + "='" + selectedOption[_observableKey]() + "']", $element).prop('selected', true);
                        })
                    }

                    setTimeout(function () {
                        $element.multiselect('refresh');
                    }, 1);
                },
                disposeWhenNodeIsRemoved: element
            }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
        }
    }
    ...

다음으로 bootstrap-multiselect.js의 createOptionValue 함수를 수정하여 먼저 이 키를 목록 항목에 설정하는 값으로 사용했습니다.

createOptionValue: function (element) {
    ...

    var value = $element.val();
    // Added to handle knockout binding to an object...not just a value
    if ((this.options.optionsKey !== undefined) && (this.options.optionsKey !== null) && (this.options.optionsKey.length > 0)) {
        var key = $element.attr(this.options.optionsKey);
        if ((key !== undefined) && (key !== null) && (key.length > 0)) {
            value = key;
        }
    }

    ...
}

마지막으로 값 대신 이 속성을 기반으로 옵션 요소를 찾기 위해 bootstrap-multiselect.js에서 getOptionByValue 함수를 수정해야 했습니다.

getOptionByValue: function (value) {
    var valueToCompare = value.toString();

    // Added to handle knockout binding to an object...not just a value
    if ((this.options.optionsKey !== undefined) && (this.options.optionsKey !== null) && (this.options.optionsKey.length > 0)) {
        var opt = $("option[" + this.options.optionsKey + "='" + valueToCompare + "']", this.$select).first();
        if( (opt !== undefined) && (opt !== null) ) {
            return $(opt);
        }
    }

    var options = $('option', this.$select);

    for (var i = 0; i < options.length; i = i + 1) {
        var option = options[i];
        if (option.value === valueToCompare) {
            return $(option);
        }
    }
},