लेखों की आवृत्ति को देखते हुए, नॉकआउट जेएस हैबे पर लोकप्रियता प्राप्त कर रहा है। मैं भी अपना योगदान दूंगा। मैं विशेष रूप से गैर-मानक HTML नियंत्रण और "ट्री" के विषय को उजागर करना चाहता हूं। यहां पेड़ के द्वारा ट्रीव्यू नियंत्रण का एक एनालॉग है। लेख मानता है कि पाठक पहले से ही एक बुनियादी स्तर पर नॉकआउट जेएस से परिचित है। प्रकाशन को नॉचआउट जेएस सीखने के लिए एक ट्यूटोरियल के रूप में देखा जा सकता है। दूसरी ओर, मुझे उम्मीद है कि नॉकआउट जेएस के अनुभवी उपयोगकर्ता अपने लिए कुछ नया सीख सकेंगे।

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

शुरू करने के लिए, हम डेटा बंधन के बिना, एक अमूर्त पेड़ का निर्माण करेंगे। जब आप अपने पेड़ों को "उगा "ेंगे तो आप वास्तविक आंकड़ों से खुद को बांध पाएंगे। या यह समस्या नॉकआउट जेएस कोड के पुन: उपयोग के लिए मेरे रास्ते से हल हो जाएगी, जिसे मैं अंत में दिखाऊंगा।

... और एक पेड़ नहीं, बल्कि एक सूची।

परंपरागत रूप से, HTML पेड़ों को नेस्टेड अनऑर्डेड लिस्ट (यूएल टैग) और सीएसएस शैलियों के सेट का उपयोग करके बनाया जाता है। यानी एक पेड़ बनाने के लिए, आपको लगभग निम्न HTML मार्कअप जनरेट करना होगा:

<ul> <li> 1 <ul> <li> 3</li> </ul> </li> <li> 2 </li> <ul> 

नोड की उपस्थिति को सीएसएस कक्षाओं का उपयोग करके कॉन्फ़िगर किया गया है।
प्रदर्शन मॉडल (ViewModel), स्पष्ट रूप से, दो वस्तुओं से बनाया जा सकता है - TreeViewNode और TreeView से शुरू करने के लिए:

 function TreeViewNode(caption,children){ this.caption = caption; this.children = children; } function TreeView(children){ this.children = children; }} 

केवल एक TreeViewNode के साथ करने का प्रलोभन है, क्योंकि TreeView केवल कैप्शन फ़ील्ड की अनुपस्थिति में भिन्न होता है। हालांकि, इसमें जल्दबाजी न करें, क्योंकि बाद में इन वस्तुओं में बहुत अधिक अंतर होगा।
मॉडल-बाउंड मार्कअप एक पुनरावर्ती पैटर्न का उपयोग करेगा:

 <div data-bind='with: tree'> <ul data-bind='template: {name:"treeNode", foreach: children}'> </ul> </div> <script id='treeNode' type='text/html'> <li> <span data-bind='text:caption'></span> <ul data-bind='template: {name:"treeNode", foreach: children}'> </ul> </li> </script> 

बेशक, हमें अपने मॉडल को डेटा के साथ पॉप्युलेट करने और बाइंडिंग को आरंभ करने की आवश्यकता है:

 var vm = { tree: new TreeView([ new TreeViewNode('Node 1',[ new TreeViewNode('Node 3') ]), new TreeViewNode('Node 2') ]) }; ko.applyBindings(vm); 

यहाँ हमें क्या मिला है:

प्रयोग के लिए JSFiddle ।

अब तक यह ट्रीव्यू जैसा नहीं है। आपको सीएसएस कक्षाओं को निर्दिष्ट करने और उचित शैलियों को जोड़ने की आवश्यकता है।

स्थिति का प्रतिबिंब।

कक्षाओं को पेड़ के नोड की स्थिति और स्थिति को प्रतिबिंबित करना चाहिए। नोड की स्थिति मॉडल में परिलक्षित होनी चाहिए, इसलिए चलो मॉडल पर चलते हैं।
एक नोड का विस्तार या पतन हो सकता है। एक से दूसरे राज्य को एक सरल ऑपरेशन द्वारा प्राप्त किया जा सकता है, लेकिन सुविधा के लिए हम दोनों को परिभाषित करते हैं:

 function TreeViewNode(caption,children){ ... this.isOpen = ko.observable(); this.isClosed = ko.computed(function(){ return !this.isOpen(); },this); ... } 

मैंने .isOpen, .isClosed गुणों को अवलोकनीय बना दिया, क्योंकि वे एक-दूसरे पर निर्भर करते हैं, और उन्हें बदलने से स्वचालित रूप से DOM में परिवर्तन होगा। इन गुणों को बदलकर, हम पेड़ के नोड्स का विस्तार / पतन करेंगे।
मैंने .isClosed संपत्ति को केवल पढ़ने के लिए बनाया है, ताकि अनावश्यक कोड का उत्पादन न करें और यहां एक अनावश्यक चक्रीय निर्भरता का परिचय न दें, हालांकि यह "हल" हो सकता है। इस प्रकार, केवल .isOpen संपत्ति को सीधे बदला जा सकता है।

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

 function TreeViewNode(caption,children){ ... this.children = children||[]; this.isLeaf = !this.children.length; this.isLast = false; ... } 

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

सम्‍मिलित संपत्ति के लिए, इसके क्रियान्वयन के लिए दो विकल्प हैं। यह अपने माता-पिता के नोड के लिए दिए जा रहे लिंक के साथ ko.computed बनाया जा सकता है, या माता-पिता अपने बच्चों की सम्‍मिलित संपत्तियों की गणना कर सकते हैं। मैंने दूसरा तरीका चुना क्योंकि इसके साथ कम कोड है। पहला दृष्टिकोण भी काम आ सकता है, क्योंकि एक नोड के माता-पिता के संदर्भ में कई परिदृश्यों में उपयोगी है। हालांकि, एक से दूसरे में जाना फिर आसान होगा।
इसलिए, हम सम्‍मिलित संपत्ति का संसाधन जोड़ते हैं:

 function setIsLast(children){ for(var i=0,l=children.length;i<l;i++){ children[i].isLast = (i==(l-1)); } } function TreeViewNode(caption,children){ ... setIsLast(this.children); ... } function TreeView(children){ ... setIsLast(this.children); ... } 

अब टेम्पलेट में संबंधित वर्गों के लिए बाध्यकारी नोड टेम्पलेट जोड़ें:

 ... <li data-bind='css:{closed:isClosed,open:isOpen, leaf: isLeaf, last: isLast}'> ... </li> ... 

यह नोड्स को ढहाने और विस्तारित करने की क्षमता को जोड़ने के लिए बनी हुई है:

 function TreeViewNode(caption,children){ var self = this; ... this.toggleOpen = function(){ self.isOpen(!self.isOpen()); }; ... } 

और बंधन जोड़ें:

 ... <li data-bind='css:{closed:isClosed,open:isOpen, leaf: isLeaf, last: isLast}, click: toggleOpen, clickBubble: false'> ... </li> ... 

clickBubble: false आवश्यक है ताकि घटना माता-पिता के लिए पॉप न हो और उन्हें प्रभावित न करे।

ओप-पा नई शैली।

आप CSS पर जा सकते हैं। मैं अपने सीएसएस के साथ नहीं आया, लेकिन बस एक अन्य पुस्तकालय से शैलियों को सरल किया।

मैं उन्हें नीचे बोली:






यह कुछ इस तरह से निकला:

प्रयोग के लिए JSFiddle ।

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

एफपी में, इसे "मानचित्र" कहा जाता है।

इसके साथ शुरू करने के लिए, हम एक सहायक फ़ंक्शन का परिचय देते हैं जो डेटा सरणी में नोड मॉडल की एक सरणी प्रदान करेगा।

 function dataToNodes(dataArray){ var res = []; for(var i=0,l=dataArray.length;i<l;i++){ res.push(new TreeViewNode(dataArray[i])); } return res; } 

TreeViewNode अब इनपुट पर नोड और "बच्चों" का लेबल नहीं लेता है, लेकिन कुछ सार डेटा। जाहिर है, शिलालेख और "बच्चे" उसे डेटा से निकालना होगा। और शुरू करने के लिए, मान लें कि डेटा पूरी तरह से सार नहीं है, लेकिन यह एक ऐसी वस्तु है जिसमें हस्ताक्षर को caption संपत्ति में संग्रहीत किया जाता है, और children संपत्ति में "बच्चे", जो एक सरणी है।

 function TreeViewNode(data){ ... this.data = data; this.caption = data.caption; if(data.children) this.children = dataToNodes(data.children); else this.children = []; ... } 

यह वह मानचित्र नहीं है जो FP में मैप करता है।

हालांकि, संपत्ति के नामों के लिए तंग बंधन को छोड़ना हमारे लिए आसान है। कुछ map ऑब्जेक्ट हमें पास करने दें, जिसमें गुणों के पत्राचार का संकेत दिया गया है:

 function TreeViewNode(data){ ... this.data = data; var captionProp = (map && map.caption)||'caption', childrenProp = (map && map.children)||'children'; this.caption = data[captionProp]; if(data[childrenProp]) this.children = dataToNodes(data[childrenProp]); else this.children = []; ... } 

और इससे भी बेहतर, data ऑब्जेक्ट के प्रकार के आधार पर, गुणों के पत्राचार को गतिशील रूप से निर्धारित करने में सक्षम होना:

 function TreeViewNode(data){ ... this.data = data; var map = (typeof propMap == 'function') ? propMap(data):propMap, captionProp = (map && map.caption)||'caption', childrenProp = (map && map.children)||'children'; ... } 

अब आप TreeViewNode घोषणा और सहायक कार्यों को TreeView मॉडल घोषणा के अंदर छिपा सकते हैं, क्योंकि TreeViewNode उदाहरण अब उपयोगकर्ता द्वारा स्वतंत्र रूप से नहीं बनाए जाने चाहिए।

प्रयोग के लिए JSFiddle ।

यहां से जादू शुरू होता है।

अब हमें अंतिम आवश्यकता को पूरा करने की आवश्यकता है - "पेड़" मॉडल में डेटा परिवर्तन का स्वचालित प्रतिबिंब। हम ko.observable, ko.computed, ko.observableArray वस्तुओं का उपयोग करके KnockoutJS के "जादू" का उपयोग ko.observable, ko.computed, ko.observableArray । ऐसा करने के लिए, हमें सिर्फ children संपत्ति को संगणक बनाने की जरूरत है। और उस पर निर्भर अन्य संपत्तियों के लिए कोड भी बदलें:

  function TreeViewNode(data){ ... if(data[childrenProp]) this.children = ko.computed(function(){ return dataToNodes(ko.utils.unwrapObservable(data[childrenProp])); }); else this.children = null; ... this.isLeaf = ko.computed(function(){ return !(this.children && this.children().length); },this); this.isLast = ko.observable(false); if(this.children){ setIsLast(this.children()); this.children.subscribe(function(newVal){ setIsLast(newVal); }); } ... 

ko.utils.unwrapObservable फ़ंक्शन अवलोकन किए गए ऑब्जेक्ट का वर्तमान मान लौटाता है, या, यदि यह एक ऑब्जेक्टिव ऑब्जेक्ट नहीं है, तो वही मान जो इसे इनपुट के रूप में दिया गया था। ko.utils.unwrapObservable अंदर ko.computed का उपयोग करना स्वचालित रूप से एक निर्भरता पैदा करेगा और डेटा के रूप में अवलोकन मूल्य का उपयोग करने पर .children अपने आप अपडेट हो जाएगा। दूसरी ओर, आप बस एक जेएस सरणी का उपयोग कर सकते हैं, फिर कोई स्वचालित परिवर्तन ट्रैकिंग नहीं होगी।
हम TreeView लिए भी ऐसा ही करते हैं

 function TreeView(data, propMap){ ... this.children = ko.computed(function(){ return dataToNodes(ko.utils.unwrapObservable(data)); }); setIsLast(this.children()); this.children.subscribe(function(newVal){ setIsLast(newVal); }); ... 

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

1. डेटा में TreeViewNode लिंक रखें;
2. नोड्स की सूची को अद्यतन करते समय, पुरानी सूची में TreeViewNode ।

मैं पहली विधि दिखाऊंगा, क्योंकि यह छोटी है। हालांकि, इसकी एक सीमा है - यदि आप पेड़ के विभिन्न नोड्स के लिए एक ही वस्तु का उपयोग करना चाहते हैं, तो यह विधि काम नहीं करेगी। अधिक सटीक रूप से, यह अप्रत्याशित प्रभाव को जन्म देगा। लेकिन अगर आपके पास प्रत्येक डेटा ऑब्जेक्ट के अनुरूप केवल एक ट्री नोड है, तो सब कुछ ठीक होगा।
तो:

  function TreeViewNode(data){ ... data._treeviewNode = this; //        ... } function dataToNodes(dataArray,old){ var res = []; for(var i=0,l=dataArray.length;i<l;i++){ res.push(dataArray[i]._treeviewNode || new TreeViewNode(dataArray[i])); //        } return res; } 

पसंद हमेशा एक खुशी है।

हमारा "पेड़" व्यावहारिक रूप से उगाया जाता है। पूर्ण प्रसन्नता के लिए, हमारे पास "पेड़" के अलग-अलग नोड्स का चयन करने की क्षमता नहीं है।

 function TreeView(data, propMap){ var treeView = this; //    TreeView this.selectedNode = ko.observable(); //   ... function TreeViewNode(data){ ... this.isSelected = ko.computed(function(){ //      return (treeView.selectedNode()===this) },this); this.toggleSelection = function(){ //     if(this.isSelected()) treeView.selectedNode(null); else treeView.selectedNode(this); } } } 

टेम्पलेट को पूरक करना भी आवश्यक है:

 ... <span class='caption' data-bind='text:caption, css: {selected:isSelected},click:toggleSelection, clickBubble: false'></span> ... 

अब हम "पेड़" के पूर्ण विकसित संपादक का निर्माण कर सकते हैं।




प्रयोग के लिए JSFiddle ।

परिणाम। छिपे हुए पीआर। हाथियों का वितरण।

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

1. कॉपी और पेस्ट करें कार्य करें अपने जेएस कोड को ट्री व्यू करें या इसे एक अलग फाइल में डालें। अपनी शैलियों में स्टाइल डालें, या एक अलग फ़ाइल के रूप में शैलियों को आयात करें। टेम्पलेट डालें और अनुकूलित करें। यह परिदृश्य कोड स्निपेट उपयोग मामले के समान है।
2. अपना बंधन बनाओ।
3. टेम्प्लेट + मॉडल को बाइंडिंग में बदलने के लिए मेरी नॉकआउट-घटक लाइब्रेरी का उपयोग करें।

मैंने तीसरी विधि का उपयोग किया। अब ऐसे HTML कोड में ट्री इंसर्ट को घटाया गया है:

 <div data-bind='kc.treeView: {data:data,map:{caption:"name",children:"list"}},kc.assign:tree'></div> 

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