नॉकआउटJS - घटक

घटक एक बड़े एप्लिकेशन को संरचित करने और कोड पुन: प्रयोज्य को बढ़ावा देने के लिए यूआई कोड को व्यवस्थित करने का एक विशाल तरीका है।

यह अन्य घटक से विरासत में मिला है या नेस्टेड है। लोडिंग और कॉन्फ़िगरेशन के लिए, यह अपने स्वयं के सम्मेलनों या तर्क को परिभाषित करता है।

यह आवेदन या परियोजना के दौरान पुन: उपयोग करने के लिए पैक किया जाता है। आवेदन या छोटे नियंत्रण / विगेट्स के पूर्ण वर्गों का प्रतिनिधित्व करता है। यह मांग पर लोड या प्री लोड किया जा सकता है।

घटक पंजीकरण

अवयव का उपयोग कर पंजीकरण कर सकते हैं ko.components.register()एपीआई। यह केओ में घटकों को लोड करने और प्रतिनिधित्व करने में मदद करता है। कॉन्फ़िगरेशन के साथ घटक नाम पंजीकरण के लिए अपेक्षित है। कॉन्फ़िगरेशन निर्दिष्ट करता है कि दृश्यमॉडल और टेम्पलेट का निर्धारण कैसे किया जाए।

Syntax

घटक निम्नानुसार पंजीकृत किए जा सकते हैं -

ko.components.register('component-name', {
   viewModel: {...},    //function code
   template: {....)	//function code
});

• component-name किसी भी गैर-रिक्त स्ट्रिंग हो सकती है।

• viewModel वैकल्पिक है, और अगले अनुभागों में सूचीबद्ध किसी भी दृश्य प्रारूप को ले सकता है।

• template आवश्यक है, और अगले अनुभागों में सूचीबद्ध किसी भी टेम्पलेट प्रारूप को ले सकते हैं।

एक ViewModel बताते हुए

निम्न तालिका सूचीबोधक प्रारूपों को सूचीबद्ध करती है जिनका उपयोग घटकों को पंजीकृत करने के लिए किया जा सकता है।

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register('component name', {
   viewModel: SomeComponentViewModel,
   template: ...
});

var sharedViewModelInstance = { ... };

ko.components.register('component name', {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});

ko.components.register('component name', {  
   viewModel: {  
      createViewModel: function (params, componentInfo) {  
         ...       //function code  
         ...
      }  
   },  
   template: ....  
});

ko.components.register('component name', {
   viewModel: { require: 'some/module/name' },
   template: ...
});

define(['knockout'], function(ko) {
   function MyViewModel() {
      // ...
   }

   return MyViewModel;
});

एक टेम्पलेट बताते हुए

निम्न तालिका सूची टेम्पलेट को सूचीबद्ध करती है जिसका उपयोग घटकों को पंजीकृत करने के लिए किया जा सकता है।

ko.components.register('component name', {
   template: { element: 'component-template' },
   viewModel: ...
});

var elemInstance = document.getElementById('component-template');

ko.components.register('component name', {
   template: { element: elemInstance },
   viewModel: ...
});

ko.components.register('component name', {
   template: '<input data-bind = "value: yourName" />\
      <button data-bind = "click: addEmp">Add Emp </button>',
   viewModel: ...
});

var emp = [
   document.getElementById('node 1'),
   document.getElementById('node 2'),
];

ko.components.register('component name', {
   template: emp,
   viewModel: ...
});

ko.components.register('component name', {
   template: someDocumentFragmentInstance,
   viewModel: ...
});

ko.components.register('component name', {
   template: { require: 'some/template' },
   viewModel: ...
});

अवयव एक एकल एएमडी मॉड्यूल के रूप में पंजीकृत

एएमडी मॉड्यूल दृश्यमॉडल / टेम्प्लेट जोड़ी का उपयोग किए बिना एक घटक को खुद से पंजीकृत कर सकता है।

ko.components.register('component name',{ require: 'some/module'});

घटक बंधन

घटक बंधन के दो तरीके हैं।

• Full syntax- यह पैरामीटर और ऑब्जेक्ट को घटक को पास करता है। यह निम्नलिखित गुणों का उपयोग करके पारित कर सकता है।

  • name - यह घटक का नाम जोड़ता है।

  • params - यह घटक पर ऑब्जेक्ट में कई मापदंडों को पारित कर सकता है।

<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>

• Shorthand syntax - यह एक घटक नाम के रूप में स्ट्रिंग को पास करता है और इसमें पैरामीटर शामिल नहीं है।

<div data-bind = 'component: "component name"'></div>

• Template-only components - घटक केवल viewModel को निर्दिष्ट किए बिना टेम्पलेट को परिभाषित कर सकते हैं।

ko.components.register('component name', {
   template:'<input data-bind = "value: someName" />,
});

• Using Component without a container element- अतिरिक्त कंटेनर तत्व का उपयोग किए बिना घटकों का उपयोग किया जा सकता है। यह प्रयोग करके किया जा सकता हैcontainerless flow नियंत्रण जो टिप्पणी टैग के समान है।

<!--ko.component: ""-->
<!--/ko-->

कस्टम तत्व

कस्टम तत्व एक घटक प्रदान करने का एक तरीका है। यहां, आप सीधे एक प्लेसहोल्डर को परिभाषित करने के बजाय एक स्वनिर्धारित मार्कअप तत्व नाम लिख सकते हैं, जहां घटकों को इसके माध्यम से बाँधा जाता है।

<products-list params = "name: userName, type: userType"></products-list>

पासिंग पैरामीटर

paramsघटक को देखने के लिए पैरामीटर को पास करने के लिए विशेषता का उपयोग किया जाता है। यह डेटा-बाइंड विशेषता के समान है। परमेस विशेषता की सामग्री को जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक (बस एक डेटा-बाइंड विशेषता की तरह) की तरह व्याख्या की जाती है, इसलिए आप किसी भी प्रकार के मनमाने मूल्यों को पारित कर सकते हैं। यह निम्नलिखित तरीकों से पैरामीटर पास कर सकता है -

• Communication between parent and child components- घटक स्वयं द्वारा त्वरित नहीं होता है, इसलिए दृश्यमॉडल गुणों को घटक के बाहर से संदर्भित किया जाता है और इस प्रकार चाइल्ड घटक दृश्यमॉडल द्वारा प्राप्त किया जाएगा। उदाहरण के लिए, आप निम्न सिंटैक्स में देख सकते हैं किModelValue माता-पिता का दृष्टिकोण है, जो कि बच्चे के दृष्टिकोण से प्राप्त होता है ModelProperty।

• Passing observable expressions - यह पैरामीटर पैरामीटर में तीन मान है।

  • simpleExpression- यह एक संख्यात्मक मान है। इसमें कोई वेधशाला शामिल नहीं है।

  • simpleObservable- यह एक ऐसा उदाहरण है जो माता-पिता के दृष्टिकोण पर परिभाषित है। मूल दृश्यमॉडल बच्चे के दृष्टिकोण द्वारा किए गए अवलोकन पर परिवर्तन स्वचालित रूप से प्राप्त करेगा।

  • observableExpression- अभिव्यक्ति का मूल्यांकन तब होता है जब अभिव्यक्ति का मूल्यांकन स्वयं द्वारा किया जाता है। जब अवलोकन योग्य मूल्य बदल जाता है, तो समय के साथ अभिव्यक्ति का परिणाम भी बदल सकता है।

हम निम्नानुसार पैरामीटर पारित कर सकते हैं -

<some-component
   params = 'simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1'>
</some-component>

हम मापदंडों को दृश्यमॉडल में निम्नानुसार पारित कर सकते हैं -

<some-component
   params = 'objectValue:{a: 3, b: 2},
      dateValue: new date(),
      stringValue: "Hi",
      numericValue:123,
      boolValue: true/false,
      ModelProperty: ModelValue'>
</some-component>

घटकों में मार्कअप पासिंग

प्राप्त मार्कअप का उपयोग घटक बनाने के लिए किया जाता है और इसे आउटपुट के एक भाग के रूप में चुना जाता है। घटक टेम्पलेट में आउटपुट के भाग के रूप में निम्नलिखित नोड्स पारित किए गए हैं।

template: { nodes: $componentTemplateNodes }

कस्टम तत्व टैग नामों को नियंत्रित करना

जिन नामों का आप उपयोग कर घटकों में पंजीकरण करते हैं ko.components.register, एक ही नाम कस्टम तत्व टैग नामों से मेल खाता है। हम कस्टम तत्व टैग नामों का उपयोग करके इसे नियंत्रित करने के लिए ओवरराइड करके बदल सकते हैंgetComponentNameForNode।

ko.components.getComponentNameForNode = function(node) {
   ...
   ...   //function code
   ...
}

कस्टम तत्वों को पंजीकृत करना

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

ko.components.register('custom-element', { ......... });

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Components</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
   </head>
   
   <body>
      <!--params attribute is used to pass the parameter to component viewModel.-->
      <click params = "a: a, b: b"></click>

      <!--template is used for a component by specifying its ID -->
      <template id = "click-l">
         <div data-bind = "text: a"></div>

         <!--Use data-bind attribute to bind click:function() to ViewModel. -->
         <button data-bind = "click:function(){callback(1)}">Increase</button>
         <button data-bind = "click:function(){callback(-1)}">Decrease</button>
      </template>

      <script>
         //Here components are registered
         ko.components.register('click', {
            
            viewModel: function(params) {
               self = this;
               this.a = params.a;
               this.b = params.b;

               this.callback = function(num) {
                  self.b(parseInt(num));
                  self.a( self.a() + parseInt(num) );
               };
            },
            template: { element: 'click-l' }
         });

         //keeps an eye on variable for any modification in data
         function viewModel() {
            this.a = ko.observable(2);
            this.b = ko.observable(0);
         }

         ko.applyBindings(new viewModel() );
      </script>
      
   </body>
</html>

Output

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए निम्नलिखित कदम उठाएँ -

• में उपरोक्त कोड सहेजें component_register.htm फ़ाइल।

• इस HTML फाइल को ब्राउजर में खोलें।

घटक लोडर

घटक लोडर टेम्पलेट / viewModel जोड़ी को पास करने के लिए दिए गए घटक नाम के लिए अतुल्यकालिक रूप से उपयोग किया जाता है।

डिफ़ॉल्ट घटक लोडर

डिफ़ॉल्ट घटक लोडर स्पष्ट रूप से पंजीकृत कॉन्फ़िगरेशन पर निर्भर करता है। प्रत्येक घटक घटक का उपयोग करने से पहले पंजीकृत है।

ko.components.defaultLoader

घटक लोडर उपयोगिता फ़ंक्शंस

डिफ़ॉल्ट घटक लोडर निम्नलिखित कार्यों का उपयोग करके पढ़ और लिख सकता है।

एक कस्टम घटक लोडर को लागू करना

कस्टम घटक लोडर को निम्नलिखित तरीकों से लागू किया जा सकता है -

• getConfig(name, callback)- नामों के आधार पर, हम कॉन्फ़िगरेशन को प्रोग्रामेटिक रूप से पास कर सकते हैं। हम कॉन्फ़िगरेशन को पास करने के लिए कॉलबैक (कंपोनेंटफोन) कॉल कर सकते हैं, जहां ऑब्जेक्ट कंपोनेंटग को लोडकंपोनेंट या किसी अन्य लोडर द्वारा उपयोग किया जा सकता है।

• loadComponent(name, componentConfig, callback)- यह फ़ंक्शन जिस तरह से कॉन्फ़िगर किया गया है, उसके आधार पर व्यूमॉडल और कॉन्फ़िगरेशन के टेम्पलेट भाग को हल करता है। हम viewmodel / टेम्पलेट जोड़ी को पास करने के लिए कॉलबैक (परिणाम) कॉल कर सकते हैं, जहां ऑब्जेक्ट परिणाम निम्न गुणों द्वारा परिभाषित किया गया है।

  • template- आवश्यक है। DOM नोड्स का रिटर्न ऐरे।

  • createViewModel(params, componentInfo)- वैकल्पिक। दृश्यमॉडल ऑब्जेक्ट लौटाता है, यह देखने पर निर्भर करता है कि दृश्यमॉडल संपत्ति कैसे कॉन्फ़िगर की गई थी।

• loadTemplate(name, templateConfig, callback)- डोम नोड्स को कस्टम लॉजिक का उपयोग करके एक टेम्प्लेट में पास किया जाता है। ऑब्जेक्ट टेम्पलेटकॉन्फिग किसी ऑब्जेक्ट कंपोनेंटफिग से टेम्पलेट की एक संपत्ति है। कॉलबैक (domNodeArray) को DOM नोड्स की एक सरणी पास करने के लिए कहा जाता है।

• loadViewModel(name, templateConfig, callback) - viewModel फैक्ट्री को कस्टम लॉजिक का उपयोग करके व्यूमाडेल कॉन्फ़िगरेशन में पास किया जाता है।