🧓🏼 🖥️ 👩🏻‍✈️ नॉकआउट जेएस का उपयोग करने का उदाहरण ♉️ 👉🏽 🗼

शुभ दिन, हब्रोसैक्विटी! लेख में उपयोगकर्ताओं की सूची को संपादित करने के लिए एक वेब पेज बनाने की प्रक्रिया पर चर्चा की जाएगी। समाप्त उदाहरण यहां लिया जा सकता है । लेख एक समीक्षा नहीं है, लेकिन वास्तविक शत्रुता के करीब है, इसलिए मैं दृढ़ता से अनुशंसा करता हूं कि आप एक सरल उदाहरण के साथ खुद को परिचित करें। मैंने उपरोक्त रूपरेखा का उपयोग करने का प्रयास करने का निर्णय लिया। इस कदम की आवश्यकता इस तथ्य के कारण है कि ग्राहक पक्ष पर समृद्ध तर्क का वर्णन करने के लिए बार-बार अगली साइकिल का आविष्कार किया गया था। यह कुछ इस तरह देखा गया:

(function($) { var initListeners = function() { /*    , , click, keypress, focus  ..*/ } var updateListeners = function() { /*   ,      */ } var createUser = function() { /*  Ajax          */ } var updateUser = function() { /*  Ajax          */ } var parseResponse = function() { /* JSON-     */ } initListeners(); })(jQuery)

यह दृष्टिकोण जावास्क्रिप्ट कोड 100 लाइनों के लंबे समय के लिए एक अच्छे विकल्प की तरह लग सकता है। हालाँकि, इसका कोई भी संशोधन महंगा हो सकता है यदि कोड 200 या अधिक लाइनों तक बढ़ता है। मेरी राय में मुख्य नुकसान हैं: रूटीन क्रियाओं की उपस्थिति (घटना प्रबंधन, JSON ऑब्जेक्ट्स के तरीकों को जोड़ना), पेजकंट्रोलर संरचना का एक खराब औपचारिक वर्णन, और मजबूत HTML और जावास्क्रिप्ट कनेक्टिविटी। वास्तव में, अक्सर इस तरह के कोड नेस्टेड कॉलबैक के एक mishmash में फिसल जाते हैं और एक नए फ़ंक्शन के विवरण के स्तर को चुनने के मायावी तर्क। कोड की संरचना के लिए एक रूपरेखा का उपयोग करने का निर्णय लिया गया। चुनाव MVVM नॉकआउटJS फ्रेमवर्क पर पड़ा और यहां बताया गया है:

DOM तत्वों के लिए घटनाओं की घोषणात्मक बाध्यकारी औपचारिक रूप से काम करता है और जादुई तरीके से काम करता है (IMHO, jQuery से लाइव एक निचले स्तर का ऑपरेशन है)
JSON डेटा के साथ क्लाइंट पर मॉडल को सिंक्रनाइज़ करने का तंत्र एक कांटा के रूप में उपयोग करना आसान है
DOM तत्वों का निर्माण करने के लिए टेम्प्लेट का उपयोग किया जाता है (उनकी सुविधा समाचार नहीं है, हालाँकि, नॉकआउटJS के साथ उनका उपयोग रोटी और मक्खन के समान प्राकृतिक दिखता है)
लंच ब्रेक के दौरान भी धीरे-धीरे नॉकआउट के साथ काम करने के लिए जावास्क्रिप्ट कोड को रिफलेक्टर करने की क्षमता

हम समस्या बताते हैं

उपयोगकर्ताओं की सूची को संपादित करने के लिए जिम्मेदार एप्लिकेशन के हिस्से को लिखना आवश्यक है। यह ज्ञात है कि प्रत्येक उपयोगकर्ता को फ़ील्ड के निम्नलिखित सेट द्वारा दर्शाया जाता है:

 { Id : "", Surname: "", FirstName: "", PatronymicName: "", Login: "", EMail: "" }

यह भी ज्ञात है कि सर्वर उपयोगकर्ताओं पर इस तरह की कार्रवाई कर सकता है:

ग्राहक को वर्तमान उपयोगकर्ता सूची भेजें
उपयोगकर्ता आईडी द्वारा उपयोगकर्ता को हटा दें
उपयोगकर्ता रिकॉर्ड जोड़ें / अपडेट करें

इन सभी क्रियाओं को एक ठूंठ द्वारा वर्णित किया जा सकता है, जिसे इस प्रकार दर्शाया गया है:

 function DataGate() { var modelStub = { users: [...] }; return { Load : function(callback) { callback(modelStub); }, DeleteUser : function(callback, id) { callback(true); }, SaveOrUpdateUser : function(callback, user) { callback(user); } } } var gate = new DataGate();

हम पृष्ठ प्रदर्शित करने के लिए आवश्यकताओं को परिभाषित करते हैं (मैं पृष्ठ तत्वों को नाम दूंगा जैसा कि उपयोगकर्ता उन्हें प्रस्तुत करता है, और यह नहीं कि उन्हें HTML कोड में कैसे लागू किया जाता है):

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

उपयोगकर्ता को एक अलग संवाद बॉक्स में संपादित करना उचित है (क्योंकि उसके सभी फ़ील्ड सूची में आवश्यक नहीं हैं, और कुछ फ़ील्ड समग्र हैं, जिनमें से सीधा संपादन एक हिट गीत है, जो, हालांकि, एक समाधान है )। यह ध्यान दिया जाना चाहिए कि एक संवाद बॉक्स के अंदर उपयोगकर्ता फ़ील्ड के प्रत्यक्ष परिवर्तन से सूची के अंदर इसकी प्रस्तुति में बदलाव होगा। यह अवांछनीय है, क्योंकि आपको पहले उपयोगकर्ता को सहेजना होगा, और यदि सब कुछ ठीक हो गया है, तो संवाद को बंद करें और सूची में परिवर्तन लागू करें। इस व्यवहार को व्यवस्थित करने के लिए, पृष्ठ के ViewModel को दो भागों में विभाजित करना उचित है। तब सूची का ViewModel, उपयोगकर्ताओं की सूची प्राप्त करने के तुरंत बाद html कोड पर लागू हो जाएगा, और उपयोगकर्ता संपादन का ViewModel प्रदर्शित होने के समय संवाद के मूल भाग पर सुपरइम्पोज किया जाएगा।

उपयोगकर्ता सूची कार्यान्वयन

जावास्क्रिप्ट कोड

उपयोगकर्ताओं की सूची के लिए एक ViewModel परिभाषित करें:

 var viewModel = { selectedUser : ko.observable(null), //      deleteSelectedUser : function() { /*             users */ }, createUser : function () { /*      */ } }

प्रतीक्षा करें, उपयोगकर्ता कहां होंगे? ViewModel एक उपयोगिता द्वारा बढ़ाया जा सकता है जो JSON स्ट्रिंग या POJI ऑब्जेक्ट्स से ऑब्जर्वर ऑब्जेक्ट बनाएगा । यह है कि सर्वर से ऑब्जेक्ट्स के लिए साधारण ऑब्जेक्ट्स की "कास्टिंग" कैसे तरीकों और ऑब्जर्वर गुणों के साथ, KNockoutJS के साथ उपयोग के लिए तैयार है, का आयोजन किया जाता है। डेटागेट कोड स्निपेट पर एक नज़र डालें:

 { users: [...] }

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

प्रत्येक ग्राफ़ ऑब्जेक्ट के लिए एक निर्माता फ़ंक्शन को परिभाषित करें
यदि ऑब्जेक्ट अन्य ऑब्जेक्ट की एक सरणी है, तो उनके बीच कुंजी फ़ील्ड निर्धारित करें

यह सेटिंग इस तरह की जा सकती है:

 var mapping = { users: { key: function(data) { return ko.utils.unwrapObservable(data.Id); }, create: function(options) { return new userMapping(options.data); } } }

जैसा कि आप देख सकते हैं, आईडी फ़ील्ड का उपयोग कुंजी के रूप में किया जाता है, और उपयोगकर्ता ऑब्जेक्ट के निर्माण के लिए कंस्ट्रक्टर फ़ंक्शन का उपयोग किया जाता है:

 var userMapping = function(user) { ko.mapping.fromJS(user, {}, this); /*    user    this */ this.FIO = ko.dependentObservable(function() { return this.Surname() + " " + this.FirstName() + " " + this.PatronymicName(); }, this); /*        this  ,      user */ var _self = this; this.select = function() { viewModel.selectedUser(_self); } /*    */ this.edit = (function() { /*      */ })(); /*    ,              */ }

पृष्ठ पर देखने के लिए बाइंड करें:

 $(function() { gate.Load(function(loadedModel) { ko.mapping.fromJS(loadedModel, mapping, viewModel); ko.applyBindings(viewModel); }); });

HTML कोड

सभी कोड <body> टैग के अंदर स्थित होंगे:

 <h2> </h2> <div data-bind="jqueryui : 'buttonset'"> <button data-bind="click: createUser"></button> <button data-bind="click: deleteSelectedUser, enable: selectedUser() !== null"></button> </div> <div id="UserListTable"> <div> <table class="list"> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody data-bind="template: {name: 'editUsersRow', foreach: users, templateOptions: { current: selectedUser } }"> </tbody> </table> </div> </div> <script type="text/html" id="editUsersRow"> <tr data-bind="attr: { 'data-id': Id }, click: select, css: { selected: $data == $item.current() }"> <td><a href="#" data-bind="text: FIO, click: edit"></a></td> <td data-bind="text: Login"></td> </tr> </script>

कोड पर कुछ नोट:

Jquery ui को स्वचालित रूप से कनेक्ट करने के लिए, KNockoutJS के लिए एक प्लगइन का उपयोग किया जाता है, जो मेरे द्वारा थोड़ा अद्यतन किया गया था ताकि बटन समर्थन / अक्षम करें। लेखक से इसके उपयोग का एक उदाहरण यहाँ है ।
ViewModel के सभी तरीके और गुण शाब्दिक रूप में उपलब्ध हैं।
विशेष टेम्प्लेट टेम्प्लेट के अंदर उपलब्ध हैं: $ आइटम और $ डेटा। पहला अपने विशेष तरीकों और टेम्पलेट ऑप्शंस के माध्यम से पारित विकल्पों के साथ एक टेम्पलेट ऑब्जेक्ट है, दूसरा वर्तमान ऑब्जेक्ट है, जिसे वर्तमान टेम्पलेट के सापेक्ष एक ViewModel माना जाता है। EditUserRow टेम्प्लेट के लिए, ViewModels पर्यवेक्षक व्यू व्यूमॉडल से उपयोगकर्ता उदाहरण हैं।
उदाहरण बाध्यकारी बाइंडिंग-टेम्प्लेट के उपयोग को दर्शाता है। यह ध्यान में रखा जाना चाहिए कि इस मोड का उपयोग यह सुनिश्चित करता है कि जब किसी विशेष उदाहरण को बदल दिया जाता है, तो यह केवल एक विशिष्ट ऑब्जेक्ट के एक विशिष्ट टेम्पलेट को फिर से तैयार करेगा, न कि पूरे संग्रह को, जो संग्रह> 100 तत्वों के लिए बहुत महत्वपूर्ण है।

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

उपयोगकर्ता का क्रियान्वयन संवाद बनाएँ / संपादित करें

जावास्क्रिप्ट कोड

जैसा कि ऊपर उल्लेख किया गया है, पर्याप्त इंटरफ़ेस व्यवहार के लिए, संवाद के एक अलग ViewModel को लागू करना आवश्यक है (अधिमानतः बनाने और संपादन दोनों के लिए सार्वभौमिक)। हालाँकि, संपादन संवाद को प्रदर्शित करने के लिए तंत्र निम्नानुसार प्रस्तुत किया जा सकता है:

चयनित एक से POJO उपयोगकर्ता ऑब्जेक्ट प्राप्त करें (यह ऑपरेशन मैपिंग का उपयोग करके भी किया जा सकता है) या एक खाली उपयोगकर्ता POJO ऑब्जेक्ट बनाएं (यदि आपको संपादित करने की आवश्यकता नहीं है, लेकिन एक नया बनाएं)
संवाद बॉडी टेम्पलेट से HTML कोड बनाएँ।
निर्मित टेम्पलेट पर jQuery यूआई संवाद ओवरले।
यदि संवाद सही तरीके से प्रदर्शित होता है, तो ViewModel को बाइंडिंग के मूल तत्व के रूप में डायल करें।

कोड इस व्यवहार को प्रदर्शित करता है, साथ ही एक छोटा सा समाधान:

 function buildEditUserDlg(model, closeCallback){ return $("#editUserDlg").tmpl().dialog({ title: model.FIO()+" ", /*        ,        . */ width: 400, create: function(e) { var _self = this; ko.applyBindings(model, e.target); /*   ViewModel   */ model.FIO.subscribe(function(newValue) { /*       */ $(_self).dialog("option", "title", newValue+" "); }); model.isOperationComplete.subscribe(function(newValue){ /*   ViewModel   ,    ,           */ if (newValue === true) $(_self).dialog("close"); }) }, close: function(e) { /*     ,   . */ $(this).dialog("destroy").remove(); closeCallback(); }, buttons: { "" : function() { model.save(); }, "": function() { $(this).dialog("close"); } } }); }

यह संपादन के लिए संवाद के शुरुआती कोड का वर्णन करने के लिए बना हुआ है (बनाने के लिए कोड एक विशेष मामला है)। ऐसा करने के लिए, आइए उपयोगकर्ता मैपिंग कोड पर लौटते हैं:

 this.edit = (function() { var currentDialog = null; return function() { if (currentDialog != null) { return; } var dialogModel = new userEditDialogMapping(ko.mapping.toJS(_self)); currentDialog = buildEditUserDlg(dialogModel, function() {currentDialog = null}); }; })();

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

HTML कोड

 <script type="text/html" id="editUserDlg"> <div> <table> <tbody> <tr> <th><label for="surname">:</label></th> <td><input maxlength="20" name="surname" data-bind="value: Surname" type="text" value=""></td> </tr> <tr> <th class="property"><label for="firstname">:</label></th> <td><input maxlength="20" data-bind="value: FirstName" name="firstname" type="text"></td> </tr> <tr> <th class="property"><label for="patronymicname">:</label></th> <td><input maxlength="20" name="patronymicname" data-bind="value: PatronymicName" type="text" value=""></td> </tr> <tr> <th class="property"><label for="email">E-Mail:</label></th> <td><input maxlength="30" name="email" data-bind="value: EMail" type="text" value=""></td> </tr> <tr> <th class="property"><label for="login">:</label></th> <td><input maxlength="20" name="login" data-bind="value: Login" type="text" value=""></td> </tr> </tbody> </table> </div> </script>

वह सब है। ग्राहक आवेदन तैयार है! PS। HTML टेम्पलेट को हाइलाइट करने का सबसे अच्छा तरीका क्या है?

नॉकआउट जेएस का उपयोग करने का उदाहरण

हम समस्या बताते हैं

उपयोगकर्ता सूची कार्यान्वयन

जावास्क्रिप्ट कोड

HTML कोड

उपयोगकर्ता का क्रियान्वयन संवाद बनाएँ / संपादित करें

जावास्क्रिप्ट कोड

HTML कोड

More articles: