नॉकआउट बाइंडिंग का ऑर्डर कैसे करें?

Question

मैं knockout.js का उपयोग कर रहा हूँ। मैं थोड़ा अजीब परिस्थिति में फंस गया हूं (इसकी व्याख्या करना मुश्किल है लेकिन मैं कोशिश कर रहा हूं, क्षमा करें अगर मैं स्पष्ट नहीं हूं)। मैं कस्टम बाइंडिंग का उपयोग कर रहा है और विकल्प एक भी selectList पर बाध्यकारी:

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
      optionsValue: 'Name', chosen: { }"> 
    </select> 

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingAccessor, 
        viewModel, bindigContext) { 
     var options = ko.utils.unwrapObservable(valueAccessor() || {}); 
     $(element).chosen(options); 
    } 
}; 

यहाँ क्रम selectList पर arrayOfOptions सरणी और chosen से सभी उपलब्ध विकल्पों के साथ भर जाएगा एक कस्टम बाध्यकारी है, जिसमें मैं एक CHOSEN PLUGIN से आवेदन करने वाली हूं चयन सूची।

अब जिस समस्या का मैं सामना कर रहा हूं वह यह है कि जब मैं लागू होता हूं तो कस्टम बाध्यकारी में उस समय चयन सूची पर प्लगइन का चयन करें, तो चयनसूची arrayOfOptions सरणी के विकल्पों से भरा नहीं है। custom binding एक साधारण शब्द में मतलब options binding से पहले निष्पादित हो रहा है। क्या कोई मुझे इसके लिए समाधान दे सकता है ताकि कस्टम बाइंडिंग विकल्प बाध्यकारी के बाद लागू हो?

Answer 1

अपडेट में chosen पर अपनी कॉल ले जाएं।

http://jsfiddle.net/jearles/avSfa/28/

-

ko.bindingHandlers.chosen = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var allBindings = allBindingsAccessor(); 

     var options = {default: 'Select one...'}; 
     $.extend(options, allBindings.chosen) 

     $(element).attr('data-placeholder', options.default);     
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).chosen(); 
    } 
}; 

-

वैकल्पिक रूप से, आप setTimeout का उपयोग निष्पादन कतार में नीचे chosen करने के लिए कॉल स्थानांतरित करने के लिए कर सकते हैं। यह chosen से पहले अपने काम करने के लिए नॉकआउट विकल्प बाध्यकारी समय देगा, इसे बदलने की कोशिश करता है।

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingAccessor, 
        viewModel, bindingContext) { 
     var options = ko.utils.unwrapObservable(valueAccessor() || {}); 
     setTimeout(function() { $(element).chosen(options); }, 0); 
    } 
}; 

Answer 2

ko.bindingHandlers.chosen = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    var options = allBindingsAccessor().options; 

    options.subscribe(function (newValue) { 
     $(element).chosen(); 
     $(element).trigger("chosen:updated"); 
    }); 

    var value = allBindingsAccessor().value; 
    value.subscribe(function (newValue) { 
     $(element).trigger("chosen:updated"); 
    }); 
}, 
update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    if (element.options.length > 0) { 
     $(element).chosen(); 
     $(element).trigger("chosen:updated"); 
    } 
} 

};

यह KO जे एस के साथ मेरे लिए काम किया 3.0

Answer 3

जवाब ऊपर समस्या यह है कि प्रस्तुत किया गया था का समाधान हो सकता है, वे इस तरह के { 'disable_search पास करके खोज को अक्षम करने के रूप में, डाउन मेनू अपनी चुनी ड्रॉप अनुरूपण पर कम होना प्रतीत ':सच}।

मैं आपके बाध्यकारी में चुने गए अनुकूलन को पारित करने की अनुमति देने के लिए निम्न संशोधनों का सुझाव देता हूं।

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
    optionsValue: 'Name', chosen: { 'disable_search': true }"> 
</select> 

ko.bindingHandlers.chosen = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var options = allBindingsAccessor().options; 
     var chosenOptions = allBindingsAccessor().chosen; 

     options.subscribe(function (newValue) { 
      $(element).chosen(chosenOptions); 
      $(element).trigger("chosen:updated"); 
     }); 

     var value = allBindingsAccessor().value; 
     value.subscribe(function (newValue) { 
      $(element).trigger("chosen:updated"); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     if (element.options.length > 0) { 
      var chosenOptions = allBindingsAccessor().chosen; 
      $(element).chosen(chosenOptions); 
      $(element).trigger("chosen:updated"); 
     } 
    } 
}; 

Answer 4

बाध्यकारी हैंडलर नामों की एक सरणी के साथ संपत्ति के बाद एक संपत्ति बनाएं जो इस बाध्यकारी पर निर्भर करता है।

ko.bindingHandlers.chosen = { init: function (element, valueAccessor, allBindingAccessor, viewModel, bindigContext) { var options = ko.utils.unwrapObservable(valueAccessor() || {}); $(element).chosen(options); }, after:['options'] };