नॉकआउट जेएस

Question

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

// html 
<input data-bind="multiple: { data: optionsArray }" /> 
... 
// view model 
optionsArray = ko.observableArray(); 

जहां मैं क्षेत्र प्रदान कर सकता है 'optionsArray' है, जो एक से अधिक (मेरे मामले में जो एक से अधिक चालान प्रकारों होगा) प्रयोक्ताओं की choise पकड़ होगा। यदि यह यूआई की बात आती है, तो मैंने सोचा कि यह ऐसा दिखाई दे सकता है: एकाधिक बाध्यकारी वाले तत्व के बगल में एक बटन है। इसे क्लिक करने के बाद, संवाद विंडो प्रकट होती है और सभी 'विकल्पअरे' तत्व वहां प्रदर्शित होते हैं और बदला जा सकता है, नया जोड़ा या हटाया जा सकता है।

मुझे नहीं पता कि यह कैसे प्राप्त किया जाए क्योंकि मैं सभी विकल्पों को प्रदर्शित करने के हिस्से में असफल रहा, संवाद बॉक्स में ऐरे तत्वों को एक तरह से वे अवलोकन के रूप में संपादित किया जा सकता है और सभी परिवर्तन दृश्य में दिखाई देते हैं। मॉडल। विकल्प। क्या यह भी संभव है?

क्या आपको कस्टम बाइंडिंग बनाने में कोई अनुभव है और इससे मेरी सहायता करें?

Answer 1

इसके लिए आपको custom binding बनाने की आवश्यकता नहीं है। आप selectedOptions का उपयोग कर सकते हैं यहां बाध्यकारी दस्तावेज से लिंक है: http://knockoutjs.com/documentation/selectedOptions-binding.html।

आपके विचार मॉडल के लिए optionsArray और selectedTypes नमूदार सरणियों जोड़ें:

self.optionsArray = ko.observableArray(); 
self.selectedTypes = ko.observableArray(); 

और बाँध multiselect रहे हैं:

<select data-bind="options: optionsArray, selectedOptions: selectedTypes" size="5" multiple="true"></select> 

यहाँ संवाद के साथ उदाहरण के काम करने और नए विकल्प जोड़ रहा है: http://jsfiddle.net/vyshniakov/nZtZd/

Answer 2

ko.bindingHandlers.multiple = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     $(element).change(function() { 
      var actualValueArray = $(this).val().split(","); 
      valueAccessor(actualValueArray); 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var valueArray = valueAccessor(); 
     var valueArrayUnwrapped = ko.utils.unwrapObservable(value); 
     // Join all invoice numbers using comma 
     $(element).val(valueArrayUnwrapped.join(", ")) 
    } 
};