नॉकआउटJS: फ्लाई पर सूचियों को फ़िल्टर करना

पिछले शनिवार को, मुझे Dneporpetrovsk में .NET शनिवार को MVVM और KnockoutJS पर एक रिपोर्ट पढ़ने का सम्मान मिला ।
रिपोर्ट को जनता ने बहुत गर्मजोशी से देखा और कई दिलचस्प सवाल किए,
जिसका खुलासा रिपोर्ट के दौरान ही नहीं किया गया था।
वास्तव में, मैंने उनमें से कुछ के बारे में सार्वजनिक जवाब लिखने का फैसला किया है।

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

इसका जवाब हैबरात में है।


मैं MVVM और नॉकआउटJS के बारे में बात नहीं करूंगा। एक हब्र पर आप इस लेख को पढ़ सकते हैं, मेरी रिपोर्ट से एक वीडियो भी होगा।

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

ViewModel

var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); }; var viewModel = { persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]) }; ko.applyBindings(viewModel); 

राय

 <script type="text/html" id="PersonInfo"> <li> <span data-bind="text: gender"></span> <span data-bind="text: name"></span> </li> </script> <div data-bind=" template: { name: 'PersonInfo', foreach: persons}"></div> 

समस्या का सबसे सरल समाधान बंधन में सीधे सरणी को फ़िल्टर करना है। यह फॉर्च पैरामीटर को संशोधित करके किया जाता है:

 foreach: ko.utils.arrayFilter( persons(), function(p){ return p.gender() == 'M';} ) 

यह काम करेगा और सही तरीके से काम करेगा। व्यक्तियों के संग्रह को बदलते समय, सूची को अद्यतित रखा जाएगा। यह एक पूर्ण rerendering टेम्पलेट का उत्पादन नहीं होगा। नए आइटम जोड़े जाएंगे, और हटाए गए आइटम गायब हो जाएंगे। काम देखें ।

तो, नीचे हमारी समस्या को हल करने के लिए आवश्यक कोड:

ViewModel

 var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); }; var viewModel = { persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); }, removePerson: function(person) { this.persons.remove(person); } }; ko.applyBindings(viewModel); श्रीमती सैंडरसन'), var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); }; var viewModel = { persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); }, removePerson: function(person) { this.persons.remove(person); } }; ko.applyBindings(viewModel); एजेंट राल्फ'), var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); }; var viewModel = { persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); }, removePerson: function(person) { this.persons.remove(person); } }; ko.applyBindings(viewModel); 

और बहुत विचार:

राय

 <script type="text/html" id="PersonInfo"> <li> <span data-bind="text: gender"></span> <span data-bind="text: name"></span> <small data-bind="text: new Date()"></small> <a href="#remove" data-bind="click: function() { viewModel.removePerson($data); }">x</a> </li> </script> <div data-bind=" template: { name: 'PersonInfo', foreach: ko.utils.arrayFilter( persons(), function(p){ return p.gender() == 'M';} )}"></div> <a href="#add-male" data-bind="click: addMale">Add male</a> <a href="#add-male" data-bind="click: addFemale">Add female</a> 

अब, यदि आप विचार को चालू करते हैं, तो हम समझते हैं कि हमने काकू लिखा था। हम प्रस्तुति तर्क और व्यावसायिक तर्क को अलग करने के लिए MVVM का उपयोग करते हैं, और उसी समय हम व्यू में फ़िल्टरिंग के लिए कोड लिखते हैं। यह बकवास है - MVVM में ViewModel इसके लिए जिम्मेदार है।

इसलिए, समस्या का सही समाधान है ViewModel में एक फ़ील्ड बनाना जिसमें केवल पुरुष होंगे। इस क्षेत्र को क्षेत्र व्यक्तियों में परिवर्तन के साथ तारीख तक रखा जाना चाहिए। ऐसा करने के लिए, KnockoutJS की सेवा निर्भर observables । कोड है कि एक क्षेत्र में पुरुषों कहते हैं पर आइए नज़र।

 viewModel.males = ko.dependentObservable(function() { return ko.utils.arrayFilter(this.persons(), function(p) { return p.gender() == 'M'; }); }, viewModel); 

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

का परिणाम

वास्तव में, मैं चालाक था जब मैंने कहा कि केओ देख रहा था कि हम उन पर्यवेक्षकों को देख रहे थे जब हमने पहली बार शुरू किया था। वास्तव में, वह ऐसा हर बार करता है जब वह आश्रित के मान की गणना करता है। मैं हमारे डेमो एप्लिकेशन का अंतिम संस्करण दूंगा, जिसमें हम यह चुन सकते हैं कि किसे (पुरुषों या महिलाओं को) प्रदर्शित करना है, और किसी व्यक्ति का लिंग भी बदलना है (ओह, मुझे पापी माफ करें)।

ViewModel

 var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); this.changeGender = function() { var g = this.gender() == 'F' ? 'M' : 'F'; this.gender(g); } }; var viewModel = { genderToFilter: ko.observable('M'), persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); } }; viewModel.males = ko.dependentObservable(function() { var g = this.genderToFilter(); return ko.utils.arrayFilter(this.persons(), function(p) { return p.gender() == g; }); }, viewModel); ko.applyBindings(viewModel); श्रीमती सैंडरसन'), var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); this.changeGender = function() { var g = this.gender() == 'F' ? 'M' : 'F'; this.gender(g); } }; var viewModel = { genderToFilter: ko.observable('M'), persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); } }; viewModel.males = ko.dependentObservable(function() { var g = this.genderToFilter(); return ko.utils.arrayFilter(this.persons(), function(p) { return p.gender() == g; }); }, viewModel); ko.applyBindings(viewModel); एजेंट राल्फ'), var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); this.changeGender = function() { var g = this.gender() == 'F' ? 'M' : 'F'; this.gender(g); } }; var viewModel = { genderToFilter: ko.observable('M'), persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); } }; viewModel.males = ko.dependentObservable(function() { var g = this.genderToFilter(); return ko.utils.arrayFilter(this.persons(), function(p) { return p.gender() == g; }); }, viewModel); ko.applyBindings(viewModel); Gangretta पीटरसन') var Person = function(gender, name) { this.gender = ko.observable(gender); this.name = ko.observable(name); this.changeGender = function() { var g = this.gender() == 'F' ? 'M' : 'F'; this.gender(g); } }; var viewModel = { genderToFilter: ko.observable('M'), persons: ko.observableArray([ new Person('M', 'John Smith'), new Person('M', 'Mr. Sanderson'), new Person('F', 'Mrs. Sanderson'), new Person('M', 'Agent Ralf'), new Person('F', 'Gangretta Peterson') ]), addMale: function() { this.persons.push(new Person('M', 'New male')); }, addFemale: function() { this.persons.push(new Person('F', 'New female')); } }; viewModel.males = ko.dependentObservable(function() { var g = this.genderToFilter(); return ko.utils.arrayFilter(this.persons(), function(p) { return p.gender() == g; }); }, viewModel); ko.applyBindings(viewModel); 

नए से, हम ध्यान दें:

• व्यक्ति वर्ग में, लिंग को विपरीत में बदलने के लिए एक विधि जोड़ी गई है;
• ViewModel में, देखने योग्य फ़ील्ड "जिसे प्रदर्शित करना" जोड़ा गया था;
• फ़िल्टरिंग विधि में, हम किसी ऐसे व्यक्ति के लिंग की तुलना "किसको प्रदर्शित करें" फ़ील्ड के मान से करते हैं।

देखें परिवर्तन भी काफी मामूली हैं:

 <script type="text/html" id="PersonInfo"> <li> <a href="#change" data-bind="text: gender, click: changeGender"></a> <span data-bind="text: name"></span> </li> </script> <table width="100%"> <tr valign="top"> <td width="50%"> <label> <input type="radio" value="M" data-bind="checked: genderToFilter" />Males </label> <label> <input type="radio" value="F" data-bind="checked: genderToFilter" />Femails </label> <div data-bind=" template: { name: 'PersonInfo', foreach: males }"></div> </td> <td> <strong>All</strong> <div data-bind=" template: { name: 'PersonInfo', foreach: persons }"></div> </td> </tr> </table> <a href="#add-male" data-bind="click: addMale">Add male</a> <a href="#add-male" data-bind="click: addFemale">Add female</a> 

हमने चेक किए गए बाइंडिंग के साथ एक रेडियो-बटन जोड़ा है, जो निर्धारित करता है कि लिंगटोफिल्टर क्षेत्र में मूल्य के अनुसार किसे चुना जाएगा। यह एक द्वि-दिशात्मक बंधन है इसलिए जब आप बदलते हैं तो चयनित रेडियो परिवर्तन दृश्यमॉडल में आ जाएंगे। हमने फ़िल्टरिंग के दौरान लिंगटोफिल्टर क्षेत्र तक पहुंच बनाई, जिसका अर्थ है कि फ़िल्टरिंग फिर से होगा।

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

इस के प्रकाश में, धूर्तता की मेरी मान्यता समय पर किया गया था। यदि KO ने स्कैन नहीं किया था कि हम प्रत्येक भरोसेमंद पुन: गणना के दौरान किन वेधशालाओं तक पहुँचते हैं, तो रनटाइम में जोड़े गए लोगों के लिए लिंग परिवर्तन के कारण पुनः फ़िल्टरिंग नहीं हुई होगी।

पिछले पैराग्राफ थोड़ा भ्रमित थे, लेकिन उम्मीद है कि समझ में आता है।

अंतिम संस्करण देखें

निष्कर्ष

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

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