Bootstrap-multiselect: नॉकआउटजेएस ऑब्जेक्ट वैल्यू के लिए बाध्यकारी (एक साधारण मूल्य नहीं) ... हैक फिक्स शामिल है

मैं नॉकआउट सिलेक्ट बाइंडिंग का उपयोग कर रहा हूं जहां एक संपूर्ण ऑब्जेक्ट मान के रूप में बंधा हुआ है ... न कि केवल एक स्ट्रिंग।

बूटस्ट्रैप-मल्टीसेलेक्ट को यह पसंद नहीं आया क्योंकि यह अपनी ड्रॉपडाउन सूची आइटम को संबंधित चयन विकल्प से जोड़ने के लिए "मान" का उपयोग करता है। ऐसा करने के लिए आपको अपने नॉकआउट बाइंडिंग में "विकल्प वैल्यू" विशेषता सेट करनी होगी ताकि विकल्प में "मान" विशेषता हो। हालांकि, "विकल्प वैल्यू" विशेषता को सेट करने के बाद मेरे चयनित विकल्पों में केवल उस मान को सेट करने का अपेक्षित परिणाम है जो देखने योग्य है ... संपूर्ण वस्तु नहीं।

यह बहुत संभव है कि मैं अकेला व्यक्ति हूं जो नॉकआउट के भीतर कार्यक्षमता का उपयोग करता है जो आपको संपूर्ण वस्तुओं के विकल्पों को बांधने देता है, लेकिन अगर मैं नहीं हूं ... यहां हैक फिक्स है:

"विकल्पकी" और "अवलोकन योग्यकी" नामक दो नए बूटस्ट्रैप-बहु-चयन विकल्प बनाए ताकि यह जान सके कि उस मूल्य के लिए कहां जाना है जिससे यह संबंधित हो सकता है:

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

मेरे नॉकआउट व्यू मॉडल में मैंने प्रत्येक विकल्प पर "विकल्पकी" द्वारा संदर्भित विशेषता निर्धारित की है:

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

अब मैं बूटस्ट्रैप-मल्टीसेलेक्ट.जेएस फ़ाइल में गोता लगाता हूँ। यहां मुझे सबसे पहले जो करना था वह शीर्ष पर है जहां यह नॉकआउट इनिट हैंडलर जोड़ रहा है।

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 });
        }
    }
    ...

इसके बाद मुझे बूटस्ट्रैप-मल्टीसेलेक्ट.जेएस में 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;
        }
    }

    ...
}

अंत में मुझे मूल्य के बजाय इस विशेषता के आधार पर विकल्प तत्वों को खोजने के लिए बूटस्ट्रैप-मल्टीसेलेक्ट.जेएस में 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);
        }
    }
},