ऑटोनामिक और नॉकआउट का उपयोग करके संख्यात्मक मानों को मास्क करना

सामान्य तौर पर, मुझे एक कार्य का सामना करना पड़ा - एक नियंत्रण को फिर से लिखना, एक पुनरावर्तक पर बनाया गया और इसे ग्राहक के लिए अधिक आसान, अधिक उत्तरदायी बनाया गया। उन्होंने नॉकआउट का उपयोग करने का फैसला किया। अंदर, DevExpress पाठ क्षेत्रों का उपयोग डिजिटल डेटा प्रदर्शित करने के लिए किया गया था, वे बहुत सुविधाजनक हैं और ठीक से काम करते हैं, लेकिन सवाल उठता है, लेकिन साधारण पाठ क्षेत्रों के साथ बदलने के बारे में, मैं एक मुखौटा जोड़ सकता हूं।

शुरुआत

इस समस्या को हल करने के लिए, मैंने यह देखना शुरू किया कि सामान्य प्लगइन्स प्लगइन्स या लाइब्रेरी क्या हैं जो आपको समस्या को जल्दी और आसानी से हल करने की अनुमति देगा। परिणामस्वरूप, मुझे दो लाइब्रेरी मिलीं:

• जेकरी प्लगइन jquery.maskedinput jquery.maskedinput प्लगइन पेज
• AutoNumeric पुस्तकालय AutoNumeric पुस्तकालय पृष्ठ

के विश्लेषण

पुस्तकालयों की क्षमताओं को देखते हुए, मैं निश्चित रूप से कह सकता हूं कि मैं ऑटोनामिक का उपयोग करूंगा , क्योंकि इसमें इनपुट मास्क को दिखाने की नहीं, बल्कि मक्खी पर इनपुट मूल्य को संसाधित करने की क्षमता है। इसका व्यवहार DevExpress पाठ क्षेत्र के व्यवहार के समान है। Jquery.maskedinput प्लगइन, दुर्भाग्य से, इस संभावना को नहीं मिला। केवल एक सख्त मास्क का उपयोग करके डेटा दर्ज करने की संभावना है, जो पाठ क्षेत्र में प्रकट होता है, उपयोगकर्ता को आगामी इनपुट प्रारूप के बारे में सूचित करता है। मेरे मामले के लिए, ऐसी प्रक्रिया उपयुक्त नहीं है।

आवेदन

खैर, एक पाठ क्षेत्र में डेटा के लिए एक मास्किंग लाइब्रेरी की पसंद के साथ, मैंने फैसला किया, लेकिन यहां बताया गया है कि मैं खेतों के लिए मुखौटा कैसे बांधूंगा। पहले एक विचार था, सभी आवश्यक क्षेत्रों के लिए सेट करने के लिए जो एकल इनपुट प्रारूप, एक विशिष्ट वर्ग का उपयोग करते हैं, और फिर ऑटोन्यूमेरिक लाइब्रेरी को खिलाने के लिए jquery का उपयोग करते हैं। लेकिन यह मुझे लग रहा था कि यह समाधान बहुत सुविधाजनक नहीं होगा।
फिर मैंने सोचा, क्यों न नॉकआउट की शक्ति का इस्तेमाल किया जाए! चूंकि नॉकआउट आपको डेटा बाइंडिंग के लिए कस्टम हैंडलर लागू करने की अनुमति देता है, इसलिए मैंने केवल एक हैंडलर बनाने और इसे data-bind="" विशेषता में निर्दिष्ट करने का निर्णय लिया।

AutoNumeric के बारे में थोड़ा सा

मैं समस्या को हल करने में मेरे द्वारा उपयोग की जाने वाली कुछ उपयोगी विधियों का मूल्य देता हूं:

• autoNumeric() विधि - आपको चयनकर्ता का उपयोग करके निर्दिष्ट तत्व पर ऑटो-मास्किंग को सक्रिय करने की अनुमति देता है, उदाहरण के लिए इस तरह: $('.autonum').autoNumeric();
• विधि autoNumericGet(); - आपको एक मान प्राप्त करने की अनुमति देता है जिसका उपयोग अंकगणितीय संचालन में किया जा सकता है (यानी इनपुट डेटा को सजाने वाले विभाजकों से मुक्त किया गया मूल्य)। उदाहरण के लिए: $(selector).autoNumericGet();
• विधि autoNumericSet(value); - संख्याओं के उत्पादन की सुंदरता के लिए, आवश्यक विभाजकों के साथ इसे सजाने के लिए, मूल्य value संसाधित करता है। उदाहरण के लिए, $(selector).autoNumericSet(value);

मैं एक पैरामीटर के रूप में autoNumeric() पद्धति को autoNumeric() गए विकल्पों का मूल्य देता हूं:

• aSep - इंगित करता है कि किस विभाजक का उपयोग सैकड़ों के लिए किया जाएगा
• aDec - इंगित करता है कि भिन्नात्मक भाग के लिए किस विभाजक का उपयोग किया जाएगा
• mDec - इंगित करता है कि आंशिक अंश विभाजक के बाद कितने अंक का संकेत दिया जाएगा

ऑटोनामिक को कॉन्फ़िगर करने के लिए स्थानांतरण का एक उदाहरण, मेरे द्वारा उपयोग किए जाने वाले विकल्प:

 $('.autonum').autoNumeric({ aSep: ',', aDec: '.', mDec: 0 }); 

* इसका अर्थ है कि ऑटोन्यूमेरिक सैकड़ों पूर्णांक भागों के विभाजक के लिए 'और' का उपयोग करेगा। ' आंशिक भाग के विभाजक के रूप में। और भिन्नात्मक विभाजक के बाद अंकों की संख्या भी 0 के बराबर होगी (यानी पूर्णांक प्रदर्शित किए जाएंगे)।

नॉकआउट का उपयोग करके कार्यान्वयन

AutoNumeric के लिए एक कस्टम डेटा बाइंडिंग हैंडलर लागू करना

  ko.bindingHandlers.numberMaskedValue = { init: function(element, valueAccessor, allBindingsAccessor) { //  ,    , //     var options = allBindingsAccessor().autoNumericOptions || { aSep: ',', aDec: '.', mDec: 0 }; // html       $(element).autoNumeric(options); //   'focusout' , //     observable  ko.utils.registerEventHandler(element, 'focusout', function() { var observable = valueAccessor(); //        value = $(element).autoNumericGet(); observable(isNaN(value) ? 0 : value); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); //   ,   ,  $(element).autoNumericSet(value); } }; 

उपरोक्त कार्यान्वयन हमें इस हैंडलर को इस तरह से उपयोग करने की अनुमति देता है:

 <input type="text" data-bind="numberMaskedValue: countOfFriends"/> 

या विकल्पों के साथ:

 <input type="text" data-bind="numberMaskedValue: countOfFriends, autoNumericOptions:{aSep: ',', aDec: '.', mDec: 3}"/> 

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

संदर्भ

• JsFiddle पर इस कस्टम हैंडलर का उपयोग करने का पूरा उदाहरण । कार्यान्वयन में, आप नेत्रहीन फ़ील्ड में संग्रहीत वास्तविक मान और उपयोगकर्ता के लिए पाठ फ़ील्ड में प्रदर्शित मूल्य देख सकते हैं।

आपका ध्यान के लिए धन्यवाद!