नॉकआउट जेएस: 40 पंक्तियों में स्क्रैच से अजाक्स ग्रिड दृश्य

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

कथित बटन समझौते से कौन डरता नहीं है, मैं आपसे हैबरकट के तहत पक्ष लेने के लिए कहता हूं।



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



संपूर्ण बैकएंड हमारे लिए पहले से ही बनाया गया है, और सभी इंटरफेस पहले से ही ज्ञात हैं। इसलिए मैं उन्हें यहां दे दूंगा।

ActionResult List(FilterParams filterParams, int pageNumber = 1); 

ListResult ऑब्जेक्ट आउटपुट पर लौटा है। इसमें "खोज परिणाम" और स्विचिंग पेजों के लिए डेटा (वर्तमान पृष्ठ संख्या और कितने पृष्ठ हैं) की एक सरणी है।
कोड में, यह सब इस तरह दिखता है:

 public class FilterParams { public int? AgeFrom { get; set; } public int? AgeTo { get; set; } public bool ShowMale { get; set; } public bool ShowFemale { get; set; } } public enum Gender { Male, Female } public class PagingData { public int PageNumber { get; set; } public int TotalPagesCount { get; set; } } public class Person { public string FirstName { get; set; } public string LastName { get; set; } public int Age { get; set; } public Gender Gender { get; set; } } public class ListResult { IEnumerable<Person> Data { get; set; } PagingData Paging { get; set; } } 

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

 <script type="text/html" id="TableRow"> <tr> <td data-bind="text: FirstName"></td> <td data-bind="text: LastName"></td> <td data-bind="text: Gender"></td> <td data-bind="text: Age"></td> </tr> </script> <table> <thead> <tr> <th> First name</th> <th> Last name</th> <th> Gender</th> <th> Age</th> </tr> </thead> <tbody data-bind="template: { name: 'TableRow', foreach: rows }"> </tbody> </table> 

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

 var viewModel = { rows: ko.observableArray() }; ko.dependentObservable(function () { $.ajax({ url: '/AjaxGrid/List', type: 'POST', context: this, success: function (data) { this.rows(data.Data); } }); }, this); ko.applyBindings(viewModel); 

ViewModel में केवल एक फ़ील्ड - पंक्तियाँ होती हैं। शुरुआत में यह खाली है। फिर हम dependObservable बनाते हैं, जिसे आरंभीकरण के दौरान निष्पादित किया जाएगा। रन टाइम पर, यह सर्वर के लिए एक AJAX अनुरोध करेगा, और प्रतिक्रिया से डेटा फ़ील्ड के मान को पंक्तियों के क्षेत्र में असाइन किया जाएगा। केओ पंक्तियों के क्षेत्र में परिवर्तन को ट्रैक करेगा और आने वाली प्रविष्टियों के साथ तालिका को पॉप्युलेट करेगा। आप आधिकारिक दस्तावेज में या इस टिप्पणी में dependObservable के काम के बारे में अधिक पढ़ सकते हैं।

अगला चरण पृष्ठ स्विच जोड़ना है। आइए viewModel से शुरू करते हैं

 var viewModel = { rows: ko.observableArray(), paging: { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) { this.PageNumber(pn + 1); } }, back: function () { var pn = this.PageNumber(); if (pn > 1) { this.PageNumber(pn - 1); } } } }; 

इस उदाहरण में, MVVM पैटर्न में ViewModel का सार बहुत स्पष्ट रूप से दिखाई देता है। मॉडल में दो गुण होते हैं, PageNumber और TotalPagesCount । और इस मॉडल के प्रतिनिधित्व में पहले से ही अगले () और पीछे () तरीके हैं। अगर हमें isFirstPage या isLastPage संपत्तियों की आवश्यकता है , तो उन्हें भी viewModel में घोषित किया जाएगा। इस प्रकार, राजा (मॉडल) एक सहायक और परिवर्तनशील रेटिन्यू (ViewModel) से घिरा हुआ है।

पृष्ठ स्विचर का प्रदर्शन तुच्छ है।

 <script type="text/html" id="PagingPanel"> Page <span data-bind="text: PageNumber" /> of <span data-bind="text: TotalPagesCount" />. <br /> <a href="#next" data-bind="click: back"><</a> <a href="#next" data-bind="click: next">></a> </script> <div data-bind="template: { name: 'PagingPanel', data: paging }"></div> 

इस प्रकार, हम केवल यह प्रदर्शित करेंगे कि कौन से पृष्ठ कितने प्रदर्शित हैं और बटन आगे और पीछे हैं। पृष्ठों को स्विच करते समय डेटा अपडेट करने के लिए हमारे ग्रिड दृश्य को सिखाने के लिए यह बहुत कम रहता है।

ऐसा करने के लिए, हमें अपने भरोसेमंद को थोड़ा संशोधित करने की आवश्यकता है:

 ko.dependentObservable(function () { $.ajax({ url: '/AjaxGrid/List', type: 'POST', data: {pageNumber: this.paging.PageNumber()} context: this, success: function (data) { this.rows(data.Data); } }); }, this); 

हमने AJAX अनुरोध में PageNumber फ़ील्ड का मान जोड़ा है। अब नॉकआउट जानता है कि हमारी निर्भरता को PageNumber () संपत्ति में किसी भी परिवर्तन के साथ "पुनरावर्ती" होने की आवश्यकता है। इस प्रकार, जब उपयोगकर्ता बटन को आगे दबाता है, तो viewModel इस ईवेंट (डेटा-बाइंड = "क्लिक: नेक्स्ट") को पकड़ता है, और बस पेजनंबर के मूल्य को एक से बढ़ा देता है। उसके बाद, KO देखता है कि एक PageNumber परिवर्तन हुआ है, जिसका अर्थ है कि यह निर्भरता को ओवरराइड करने के लिए आवश्यक है। बदले में, एक AJAX अनुरोध भेजता है, और आने वाले डेटा को viewModel.rows में रखा जाता है, जो तालिका की सामग्री के पूर्ण पुनर्विकास का कारण बनता है।

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

 var viewModel = { filterParams: { ShowMale: ko.observable(true), ShowFemale: ko.observable(true), AgeFrom: ko.observable(), AgeTo: ko.observable() }, rows: ko.observableArray(), paging: { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) { this.PageNumber(pn + 1); } }, back: function () { var pn = this.PageNumber(); if (pn > 1) { this.PageNumber(pn - 1); } } } }; 

और वास्तव में फ़िल्टर पैनल दृश्य:

 <script type="text/html" id="FiltrationPanel"> Age from <input type="text" size="3" data-bind="value: AgeFrom" /> to <input type="text" size="3" data-bind="value: AgeTo" /> <br /> <label><input type="checkbox" data-bind="checked: ShowMale" />Show male</label> <br /> <label><input type="checkbox" data-bind="checked: ShowFemale" />Show female</label> </script> <div data-bind="template: { name: 'FiltrationPanel', data: filterParams }"></div> 

और हमें अपने आश्रित को थोड़ा सहसंबद्ध करने की आवश्यकता है।

 ko.dependentObservable(function () { var data = ko.utils.unwrapObservable(this.filterParams); // Dependent observable will react only on page number change. data.pageNumber = this.paging.PageNumber(); $.ajax({ url: url, type: 'POST', data: data, context: this, success: function (data) { this.rows(data.Data); this.paging.PageNumber(data.Paging.PageNumber); this.paging.TotalPagesCount(data.Paging.TotalPagesCount); } }); }, this); ko.dependentObservable(function () { var data = ko.toJS(this.filterParams); // Reset page number when any filtration parameters change this.paging.PageNumber(1); }, this); 

यहां थोड़ी व्याख्या की जरूरत है। स्ट्रिंग var data = ko.toJS (this.filterParams); JSP को फ़िल्टरपराम क्षेत्र से प्राप्त होता है, और सभी वेधशालाओं के मान प्राप्त होते हैं। इस तरह, किसी भी फ़िल्टर की स्थिति में परिवर्तन होने पर KO हमारी निर्भरता को बताता है। मैंने एक दूसरा डिपेंडेंट ओब्सेर्वेबल भी जोड़ा है, जो फ़िल्टरिंग की स्थिति बदलने पर वर्तमान पृष्ठ संख्या 1 को रीसेट कर देगा। इस प्रकार, फ़िल्टर बदलते समय, हमें पहले पृष्ठ का अनुरोध करना चाहिए।

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

 var data = ko.toJS(this.filterParams); 

पर

 var data = ko.utils.unwrapObservable(this.filterParams); 

इसमें, अपरिभाषित , जो toJS पद्धति के समान परिणाम देगा , सिवाय इसके कि जब फिल्टरप्रेम बदल जाता है, तो निर्भरता को छोड़ दिया जाएगा।

इस प्रकार, सर्वर से एक अनुरोध पृष्ठ संख्या में केवल एक परिवर्तन शुरू करता है, और यह पृष्ठों को बदलने या फ़िल्टरिंग शर्तों को बदलने के कारण हो सकता है।

इसके अलावा, जब हमें सर्वर से प्रतिक्रिया मिलती है, हम पेजिंग की संख्या या वर्तमान पृष्ठ की संख्या बदल जाने के मामले में पेजिंग फ़ील्ड में मानों को अपडेट करते हैं (उदाहरण के लिए, हमने पेज 10 का अनुरोध किया था, और उनमें से केवल 5 हैं)।

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

 var AjaxGridViewModel = function(url, filterParams) { this.rows= ko.observableArray(); this.filterParams = filterParams; this.paging = { PageNumber: ko.observable(1), TotalPagesCount: ko.observable(0), next: function () { var pn = this.PageNumber(); if (pn < this.TotalPagesCount()) this.PageNumber(pn + 1); }, back: function () { var pn = this.PageNumber(); if (pn > 1) this.PageNumber(pn - 1); } }; ko.dependentObservable(function () { var data = ko.utils.unwrapObservable(this.filterParams); // Dependent observable will react only on page number change. data.pageNumber = this.paging.PageNumber(); $.ajax({ url: url, type: 'POST', data: data, context: this, success: function (data) { this.rows(data.Data); this.paging.PageNumber(data.Paging.PageNumber); this.paging.TotalPagesCount(data.Paging.TotalPagesCount); } }); }, this); ko.dependentObservable(function () { var data = ko.toJS(this.filterParams); // Reset page number when any filtration parameters change this.paging.PageNumber(1); }, this); }; 

यह सब कोड ठीक 39 लाइनों पर है। यदि हम शीर्षक याद करते हैं, तो हमें आरंभीकरण के लिए छोड़ दिया गया था:

 ko.applyBindings(new AjaxGridViewModel('/Ajax/List', { ShowMale: ko.observable(true), ShowFemale: ko.observable(true), AgeFrom: ko.observable(), AgeTo: ko.observable() }); 

जैसा कि आप देख सकते हैं, दूसरा तर्क पूरी तस्वीर को खराब करता है। एक पंक्ति में एक वस्तु लिखने के बजाय, हमें इसके स्वरूप के बारे में सोचना चाहिए। वास्तव में, यह C # में वर्णित FilterParams ऑब्जेक्ट की कॉपी-पेस्ट है। इसके क्षेत्र केवल दृश्य में उपयोग किए जाते हैं, और ViewModel में हम स्पष्ट रूप से स्पष्ट रूप से उनका उपयोग नहीं करते हैं। इससे हमारे ViewModel से इस वर्ग को दाढ़ी बनाना संभव है।

इस उदाहरण में, मैंने ASP.NET MVC का उपयोग किया। और मैंने इस समस्या को बहुत सरलता से हल किया:

 C#: public ActionResult Index() { return View(new FilterParams()); } CSHTML: ko.applyBindings(new AjaxGridViewModel('@Url.Action("List")', @Html.ToJSON(Model))) 

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

लेकिन यह सब नहीं है। प्रारंभ में, निस्पंदनप्रेम क्षेत्र में अवलोकनीय मूल्य थे। और अब हमने उसे एक साधारण जेएस ऑब्जेक्ट खिलाया। हमें इस ऑब्जेक्ट के सभी क्षेत्रों को ko.observable () में लपेटने की आवश्यकता है। इसके लिए एक ko.mapping प्लगइन है।

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

 var AjaxGridViewModel = function(url, filterParams) { this.rows= ko.observableArray(); this.filterParams = ko.mapping.fromJS(filterParams); ... 

यह सब सुनिश्चित है।

और अब क्यों जरूरी था जब वहाँ jqGrid और अन्य है। लब्बोलुआब यह है कि ये सभी हेवीवेट नियंत्रण हैं जो तालिकाओं को प्रदर्शित करने के लिए अनुकूलित हैं। उनके पास अवसरों का एक गुच्छा है, लेकिन वे काफी संकीर्ण रूप से लक्षित हैं। और हमने एक पुन: प्रयोज्य दृश्यमॉडल और एक बिल्कुल हल्का दृश्य बनाया। हम तालिकाओं, सूचियों, कुछ भी का उपयोग कर सकते हैं। इस स्थिति में, केवल सर्वर कोड और HTML जानता है कि डेटा क्या प्रदर्शित होता है। और वह लचीलापन है। हमें फ़िल्टरिंग और पेजिंग के साथ डेटा प्रदर्शित करने के लिए एक सुविधाजनक उपकरण मिला है। कोड छोटा है और हम पूरी तरह से समझते हैं कि यह कैसे काम करता है। महान, है ना?

लेख में महारत हासिल करने वाले सभी को धन्यवाद। मुझे उम्मीद है कि यह दिलचस्प और उपयोगी था। कोई भी इच्छुक व्यक्ति इस लिंक से ASP.NET MVC 3 पर उदाहरण के अंतिम संस्करण के लिए स्रोत कोड डाउनलोड कर सकता है।

आपके ध्यान के लिए फिर से धन्यवाद। मुझे सवालों और रचनात्मक आलोचना पर खुशी होगी।

अद्यतन : फ़िल्टरिंग शर्तों को बदलते समय दो सर्वर अनुरोधों के साथ एक समस्या को ठीक किया गया।