नॉकआउट जेएस: परिवर्तन को स्वीकार या अस्वीकार करना कितना आसान है

अक्सर उपयोगकर्ता इंटरफ़ेस में "सहेजें" और "रद्द करें" बटन होते हैं। विशेष रूप से अक्सर इन बटनों का उपयोग रूपों में किया जाता है। इस तथ्य के बावजूद कि आधुनिक दुनिया में सब कुछ इंटरफ़ेस को सरल बनाने जा रहा है, इन बटनों की अभी भी मांग है।

आज मैं यह जानने का प्रस्ताव करता हूं कि व्यक्तिगत प्रेक्षणों और संपूर्ण दृश्य मॉडलों के परिवर्तनों को स्वीकार करने और रोल करने के लिए नॉकआउट जेएस का उपयोग कैसे करें।

नॉकआउट जेएस के साथ परिचित तुरंत विषय के बारे में सबसे अच्छे ब्लॉग के लिए दो लिंक दे सकते हैं

• नॉकआउट में स्मार्ट गंदा झंडा बनाना
• अपना मॉडल स्वीकार करें या संपादन रद्द करें

इन विधियों के फायदे और काफी महत्वपूर्ण नुकसान दोनों हैं जिन्हें समाप्त करने की आवश्यकता है। क्रियात्मक कमजोरियाँ

• गंदा झंडा - परिवर्तन को बचाने की अनुमति नहीं देता है, लेकिन केवल उन्हें अपनी प्रारंभिक स्थिति में रीसेट करता है।
• safeObservable - जब तक प्रतिबद्ध नहीं होता है, तब तक कोई भी परिवर्तन नहीं देखता है। उदाहरण के लिए, आश्रित वेधशालाओं का उपयोग करते समय यह सीमा बहुत निराशाजनक है।

ठीक है, और इसके अलावा, वे व्यक्तिगत रूप से अवलोकन करने के उद्देश्य से हैं, लेकिन मैं एक बार में कई क्षेत्रों के साथ काम करना चाहूंगा।

कटौती के तहत, हम एक सरल तंत्र बनाने की प्रक्रिया का विस्तार से विश्लेषण करेंगे जो सरल और पारदर्शी परिवर्तनों को अपनाने और रद्द करने के साथ काम करेगा।



परिवर्तन को स्वीकार करने या रद्द करने की बात आने पर मेरे दिमाग में पहली बात यह है कि डीबीएमएस में लेनदेन और उनका कार्यान्वयन है। परिवर्तन से पहले आपको लेनदेन शुरू करने की आवश्यकता है, और फिर कमिट या रोलबैक करें। सब कुछ सरल और स्पष्ट है।

वेधशालाओं में इन तरीकों का एक एनालॉग बनाने से हमें कुछ भी नहीं रोकता है। आप बस कार्य कर सकते हैं और लेख की शुरुआत से उदाहरणों के साथ सादृश्य द्वारा अपने ko.transactionableObservable आविष्कार कर सकते हैं।

 ko.transactionableObservable = function(initialValue) { var result = ko.observable(initialValue); result.beginTransaction = function() { ... }; result.commit = function() { ... }; result.rollback = function() { ... }; return result; } var name = ko.transactionableObservable('habrauser'); 

लेकिन मैं इस दृष्टिकोण को दृढ़ता से नापसंद करता हूं। जैसा कि आप देख सकते हैं, परिणाम एक सामान्य अवलोकन योग्य है। लेकिन हमें क्या करना चाहिए अगर हम एक अवलोकन योग्य या परिवर्तनशील निर्भरता को स्वीकार / रद्द करना चाहते हैं।

प्रस्तोता , जो नॉकआउट के दूसरे संस्करण में दिखाई दिए, बचाव के लिए आते हैं।

एक्सटेंडर आपको किसी भी तरह के वेधशालाओं के व्यवहार को बहुत ही सुरुचिपूर्ण ढंग से संशोधित करने या पूरक करने की अनुमति देता है। हमारा कोड इस तरह दिखना चाहिए:

 var name = ko.observable('habrauser').extend({editable: true}); 

कुरूपता के लिए एक्सटेंडर को लागू करना सरल है:
ko.extenders['myExtender'] = function(observavle, params){}

यह विचार मेरे लिए सार्थक लगता है, इसलिए आइए अपने विस्तारक का एक सरल कार्यान्वयन करें

 ko.extenders['editable'] = function (target) { var oldValue; var inTransaction = false; target.beginEdit = function () { var currentValue = target(); if (currentValue instanceof Array) { currentValue = currentValue.slice(); // make copy } oldValue = currentValue; inTransaction = true; }; target.commit = function () { inTransaction = false; }; target.rollback = function () { if (inTransaction) { target(oldValue); inTransaction = false; } }; return target; }; 

मुझे लगता है कि रूसी में कोड का अनुवाद करने का कोई मतलब नहीं है। एकमात्र कैविटी सरणियों के साथ काम कर रही है।
अगर अवलोकन के अंदर एक सरणी है, तो हम इस मान को "याद" नहीं कर सकते हैं। चूंकि यह एक संदर्भ डेटा प्रकार है, हमें सरणी की एक प्रति याद रखने की आवश्यकता है, न कि इसका संदर्भ। और हां, केवल गैर-संदर्भित डेटा प्रकारों वाले वेधशालाएं समझ में आती हैं। बाद में हम इस समस्या को दूर करेंगे।

उपयोग उदाहरण:

 var name = ko.observable().extend({editable: true}); var nameLength = ko.dependentObservable(function() { return name() ? name().length : 0; }); name('user'); // name set to 'user' name.beginEdit(); // begin transaciton name('me'); // name set to 'me', nameLength was recalculated nameLength(); // gives us 2 name.commit(); // transaction commited; values are unchanged since last edit; we could start another one name.rollback(); // nothing happens since transation is commited name.beginEdit(); // begin another transaction name('someone'); // name set to 'someone', nameLength was recalculated name.rollback(); // rollback transaction; name set to initial value 'me', nameLength recalculated name(); // returns 'me' 

झंडा, बदलाव की उपस्थिति होना भी बहुत अच्छा होगा। सिद्धांत सरल है:

 target.hasChanges = ko.dependedObservable(function () { var hasChanges = inTransaction && oldValue != target(); return hasChanges; }); 

आउटपुट तभी सही होना चाहिए जब एक खुला लेन-देन हो और वर्तमान मूल्य लेन-देन की शुरुआत में अलग हो। हम याद करते हैं कि जब कोई भी वेधशाला जो इस परिवर्तन में उपयोग की जाती है, तो नॉकआउट निर्भरता के मूल्य को याद करता है।

वर्तमान कार्यान्वयन हमेशा गलत होगा। और इसका कारण बहुत ही सरल है: पहले निष्पादन में (यानी घोषणा के तुरंत बाद) InTransaction == गलत, जिसका अर्थ है कि AND ऑपरेटर की दूसरी जांच भी निष्पादित नहीं की जाएगी। इसका मतलब यह है कि dependendObservable कभी पुनर्गणना नहीं होगी। इसे ठीक करना काफी सरल है। हम inTransaction चर "अवलोकनीय" बनाते हैं।

इस प्रकार, लेन-देन से प्रवेश / निकास पर मूल्य की गणना की जाएगी और जब मूल अवलोकन बदल जाएगा। यह वही है जो आपको चाहिए!

 ko.extenders['editable'] = function (target) { var oldValue; var inTransaction = ko.observable(false); target.beginEdit = function () { var currentValue = target(); if (currentValue instanceof Array) { currentValue = currentValue.slice(); // make copy } oldValue = currentValue; inTransaction(true); }; target.commit = function () { inTransaction(false); }; target.rollback = function () { if (inTransaction()) { target(oldValue); } }; target.hasChanges = deferredDependentObservable(function () { var hasChanges = inTransaction() && oldValue != target(); return hasChanges; }); return target; }; 

मेरे लिए, हमें एक क्षेत्र के लिए बहुत ठोस कार्यान्वयन मिला। लेकिन क्या जब हमारे पास एक दर्जन खेत हैं। संपादन करने से पहले, प्रत्येक क्षेत्र को शुरू () और फिर कमिट / रोलबैक करना होगा। आप खुद को लटका सकते हैं।

इस तथ्य के कारण कि हम अपने कार्यान्वयन में एक्सटेंडर का उपयोग करते हैं, हम घोषित होने के बाद आवश्यक क्षेत्रों का विस्तार कर सकते हैं और चिंता न करें कि इन क्षेत्रों से हमारे भरोसेमंद लोग टूट जाएंगे। और इसका मतलब है कि हम यह स्वचालित रूप से कर सकते हैं।
मैं अपने विचार और अधिक सांसारिक व्यक्त करूंगा:

 var user = { firstName : ko.observable('habrauser'), lastName: ko.observable('sapiens') }; user.fullName = ko.dependentObservable(function() { return user.firstName() + ' ' + user.lastName(); }); ko.editable(user); user.beginEdit(); user.firstName('homo'); user.fullName(); // 'homo sapiens' user.hasChanges(); // true user.commit(); 

यदि लेख की शुरुआत में, हमने एक विशिष्ट अवलोकन लेन-देन किया, तो अब हम एक मनमाना वस्तु लेन-देन कर रहे हैं। द्वारा और बड़े, यह काफी सरलता से लागू किया गया है:

 ko.editable = function (viewModel, autoInit) { var editables = ko.observableArray(); (function makeEditable(rootObject) { for (var propertyName in rootObject) { var property = rootObject[propertyName]; if (ko.isWriteableObservable(property)) { var observable = property; observable.extend({ editable: true }); editables.push(observable); } property = ko.utils.unwrapObservable(property); if (typeof (property) == 'object') { makeEditable(property); } } })(viewModel); viewModel.beginEdit = function () { ko.utils.arrayForEach(editables(), function (obj) { obj.beginEdit(); }); }; viewModel.commit = function () { ko.utils.arrayForEach(editables(), function (obj) { obj.commit(); }); }; viewModel.rollback = function () { ko.utils.arrayForEach(editables(), function (obj) { obj.rollback(); }); }; viewModel.addEditable = function (editable) { editables.push(editable.extend({ editable: true })); }; viewModel.hasChanges = deferredDependentObservable(function () { var editableWithChanges = ko.utils.arrayFirst(editables(), function (editable) { return editable.hasChanges(); }); return editableWithChanges != null; }); }; 

केवल शुरुआत ध्यान देने योग्य है। हम ऑब्जेक्ट के सभी गुणों को बायपास करते हैं, अगर संपत्ति लेखन योग्य है (और आखिरकार, केवल इस तरह के लेन-देन हो सकते हैं, यदि आप इसके बारे में सोचते हैं), तो हम इसे अपने एक्सटेंडर का उपयोग करके बढ़ाते हैं। आगे कोड के साथ, यदि ऑब्जेक्ट फ़ील्ड में है (और सरणी भी एक ऑब्जेक्ट है), तो हम इसके फ़ील्ड के माध्यम से भी जाएंगे।

और एक सरल उपयोग उदाहरण:

 var user = { FirstName: ko.observable('Some'), LastName: ko.observable('Person'), Address: { Country: ko.observable('USA'), City: ko.observable('Washington') } }; ko.editable(user); user.beginEdit(); user.FirstName('MyName'); user.hasChanges(); // returns `true` user.commit(); user.hasChanges(); // returns `false` user.Address.Country('Ukraine'); user.hasChanges(); // returns `true` user.rollback(); user.Address.Country(); // returns 'USA' 

हमारे शोध के परिणामस्वरूप, हमें उत्पादन के लिए एक कोड तैयार मिला, जिसे मैंने GitHub पर पोस्ट किया और ko.editables नाम दिया: github.com/romanych/ko.editables

सरल उपयोग के उदाहरण और थोड़ा अधिक जटिल हैं ।

अंत तक पढ़ने वाले सभी को धन्यवाद। मुझे उम्मीद है कि कोड काम आएगा।