👩‍🎨 👩🏼‍🏭 🏇🏼 KoLite पैकेज से गंदाफ्लैग का उपयोग करके किसी ऑब्जेक्ट के जेएस गुणों में परिवर्तन करें 💇🏾 ⛎ 🤛🏾

ViewModel ऑब्जेक्ट में परिवर्तनों को ट्रैक करने के लिए, गंदाफ्लैग , जो कोलाइट लाइब्रेरी का हिस्सा है, मदद कर सकता है, जो बदले में नई सुविधाओं को जोड़कर नॉकआउट की क्षमताओं का विस्तार करता है:

गंदेफ्लैग - व्यक्तिगत और समग्र ViewModel दोनों गुणों में परिवर्तन को ट्रैक करने के लिए डिज़ाइन किया गया
asyncCommand - अतुल्यकालिक आज्ञाओं को निष्पादित करने के लिए डिज़ाइन किया गया
गतिविधि - गतिविधि को इंगित करने के लिए डिज़ाइन किया गया। AsyncCommand के साथ संयोजन के रूप में उपयोग किया जाता है

विवरण

नॉकआउट एक्सटेंशन लाइब्रेरी पैकेज को दो लोगों द्वारा लिखा गया था: हैंस फेजलमार्क और जॉन पापा
स्रोत कोड और उदाहरण देखें।

ViewModel में परिवर्तनों का पता लगाने के लिए गंदे फ़्लैग का उपयोग करने का एक उदाहरण

उदाहरण के लिए, चलिए निम्नलिखित ViewModel ऑब्जेक्ट लेते हैं:

function Vm(){ var user = { name : ko.observable('Alexey'), email : ko.observable('alexey@mail.me'), address : ko.observable('Moskow st. Petrov 12'), awards : ko.observableArray([new Award('silver','The best speaker'), new Award('gold','Brain Storm #2')]) }, dirtyFlag = ko.DirtyFlag(user); return { user : user, dirtyFlag : dirtyFlag, modelStatus : ko.computed(function(){ return dirtyFlag().isDirty() ? "Changes detected" : "No changes"; }), clearDirty : function(){ dirtyFlag().reset(); } } };

यह ViewModel dirtyFlag संपत्ति का उपयोग करता है, जो user समग्र संपत्ति के अंदर मूल्यों में परिवर्तन को ट्रैक करेगा। उपयोगकर्ता संपत्ति पर किस ट्रैकिंग का प्रदर्शन किया जाएगा, यह इंगित करने के लिए, प्रपत्र का निर्माण उपयोग किया जाता है: ko.DirtyFlag(user); । मॉडल को बांधने के बाद, dirtyFlag user संपत्ति में परिवर्तन को ट्रैक करेगा। डेटा के "प्रदूषण" की स्थिति प्राप्त करने के लिए आपको dirtyFlag().isDirty() को कॉल करने की आवश्यकता है। यदि परिवर्तन का पता लगाया जाता है और false true तो डीडी () true । यदि उपयोगकर्ता ने परिवर्तन किए और फिर डेटा को अपनी मूल स्थिति में लौटा दिया, तो डीडीथ झूठे वापस आ जाएगा, क्योंकि यह विश्लेषण किए गए गुणों की प्रारंभिक स्थिति (यानी, ऑब्जेक्ट की डेटा की एक प्रति) को बचाता है। यह स्पष्ट रूप से देखा जाता है जब आप गंदे फ़्लैग कोड को देखते हैं।

नीचे मैं पूर्ण उदाहरण कोड देता हूं, जिसमें आप गंदे फ़्लैग की क्षमताओं को सत्यापित कर सकते हैं।

HTML उदाहरण कोड

 <div class ="userform" data-bind="with: user"> <h4>Test user information</h4> <label>Name</label> <input type="text" data-bind="value: name"/> <label>E-mail</label> <input type="text" data-bind="value: email"/> <label>Address</label> <input type="text" data-bind="value: address"/> <div class="awards-title"> <h4>Awards:</h4> </div> <div class="userAwardForm" data-bind="foreach: awards"> <div class="userAwardForm"> <label>Type of award:</label> <input type="text" data-bind="value: awardType"> <label>Name of Contest</label> <input type="text" data-bind="value: contestName"> </div> </div> </div> <div class="dirty-status"> <span>Dirty status: </span><a href="#" data-bind="text: modelStatus(), css: {ok : !dirtyFlag().isDirty(), nok : dirtyFlag().isDirty()}" class="modern"></a> </div> <input type="button" class="Button" value="Reset dirty status" data-bind="click: clearDirty">

जावास्क्रिप्ट उदाहरण कोड

 $(function() { function Award(atp, contestNamev){ var awardType = ko.observable(atp), contestName = ko.observable(contestNamev); return { awardType : awardType, contestName : contestName } } function Vm(){ var user = { name : ko.observable('Alexey'), email : ko.observable('alexey@mail.me'), address : ko.observable('Moskow st. Petrov 12'), awards : ko.observableArray([new Award('silver','The best speaker'), new Award('gold','Brain Storm #2')]) }, dirtyFlag = ko.DirtyFlag(user); return { user : user, dirtyFlag : dirtyFlag, modelStatus : ko.computed(function(){ return dirtyFlag().isDirty() ? "Changes detected" : "No changes"; }), clearDirty : function(){ dirtyFlag().reset(); } } }; ko.applyBindings(new Vm()); });

सीएसएस उदाहरण कोड

 body{ background-color: #456192 ; margin:20px; } label{ display:block; color: white; } div.userform, div.userAwardForm{ padding: 10px; border: solid white 1px; } div.userAwardForm{ margin-top: 10px; } div.userform h4{ font-weight : bold; font-size:24px; margin-bottom: 15px; color: white; } .awards-title{ margin-top:10px; } .modern { height: 40px; padding: 0 5px; line-height: 40px; font-size: 14px; font-weight: bold; color: white; text-shadow: -1px -1px 0 #333; border-radius: 3px; text-decoration:none; } .ok{ background: -moz-linear-gradient(#84AB69, #334823); background: -webkit-linear-gradient(#84AB69, #334823); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#84AB69', endColorstr='#334823')"; } .nok{ background: -moz-linear-gradient(#ED3812, #7A1F05); background: -webkit-linear-gradient(#ED3812, #7A1F05); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED3812', endColorstr='#7A1F05')"; } .dirty-status{ height: 50px; } .dirty-status span{ color: white; } .Button { position: relative; cursor: pointer; display: inline-block; border: 1px solid #d5d5d5; text-decoration: none; font: 16px Arial; font-weight: bold; text-align: center; text-shadow:0px 0px 0px #444444; background: #ffffff; padding: 10px 16px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #c13737; -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px, 0 3px 0 #aeaeae, 0 5px 0 #c13737, 0 8px 0 #aeaeae, 0 10px 6px rgba(0,0,0, .60); } .Button:hover { background: #eeeeee; color: #eb5e7f; -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px , 0 3px 0 rgba(235,94,127, .30), 0 3px 0 #aeaeae, 0 5px 5px #eb5e7f, 0 5px 0 #eb5e7f, 0 8px 0 rgba(235,94,127, .15), 0 8px 0 #aeaeae, 0 10px 6px rgba(0,0,0, .60); } .Button:active { transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); -webkit-transform: translateY(2px); -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px, 0 3px 0 rgba(235,94,127, .30), 0 3px 0 #eeeeee, 0 5px 5px rgba(#eb5e7f, .65), 0 5px 0 #eb5e7f, 0 6px 0 rgba(235,94,127, .15), 0 6px 0 #eeeeee, 0 6px 6px rgba(0,0,0, .65); }

उदाहरण में, एक संकेत के रूप में, शिलालेख प्रदर्शित होते हैं: "कोई परिवर्तन नहीं" - यदि कोई परिवर्तन नहीं पाया गया है और "परिवर्तन का पता चला" - यदि परिवर्तन पाए जाते हैं। और एक पृष्ठभूमि परिवर्तन भी किया जाता है जिस पर संकेत के लिए शिलालेख प्रदर्शित किए जाते हैं।

"रीसेट डर्टी स्टेटस" बटन उदाहरण फॉर्म पर स्थित है, जो गंदे फ़्लैग व्यूमॉडल प्रॉपर्टी के reset विधि को प्रदर्शित करता है। वर्तमान परिवर्तनों को बुनियादी के रूप में स्वीकार किए जाने के लिए, आपको dirtyFlag().reset(); करने की आवश्यकता है dirtyFlag().reset(); ।

निष्कर्ष

मुझे लगता है कि यह लाइब्रेरी ViewModel के आवश्यक गुणों पर परिवर्तनों को आसानी से ट्रैक करने में मदद करेगी।

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

पुनश्च मैं खुद के लिए तस्वीर आकर्षित किया :)

KoLite पैकेज से गंदाफ्लैग का उपयोग करके किसी ऑब्जेक्ट के जेएस गुणों में परिवर्तन करें

विवरण

ViewModel में परिवर्तनों का पता लगाने के लिए गंदे फ़्लैग का उपयोग करने का एक उदाहरण

निष्कर्ष

More articles: