🐫 🦖 🛣️ हम नॉकआउट पर एक जटिल आवेदन लिख रहे हैं। जेएस

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

नतीजतन, एक तकनीक बनाई गई थी जो फ्रंट-एंड विक्रेता के लिए ब्याज की हो सकती है। मैं इस लेख में इस तकनीक को बनाना चाहता हूं।

मैं आपको एक ऐसी प्रणाली के बारे में बताऊंगा जो HTML पेज में नॉकआउट बाइंडरों के माध्यम से एम्बेडेड है। कोड प्लग-इन विगेट्स में रहता है जिसमें एचटीएमएल टेम्पलेट में नॉकआउट बाइंडिंग होती है। विजेट को एक दूसरे के भीतर घोंसला बनाया जा सकता है। यह सब उपयोग की आवश्यकता है। ams और amd रूप में रहता है। बाहरी पृष्ठ पर निर्भरता कम कर दी जाती है; सभी लाइब्रेरी (jquery, नॉकआउट, और प्लगइन्स) नाम स्थान के साथ स्थानीय अंतरिक्ष में केवल अपने ही उपयोग करते हैं। कोड बनाने के लिए, r.js का उपयोग किया जाता है। हम बूटस्ट्रैप संवाद के आधार पर कूल पेप्पर के रूप में एक पूर्ण विंडो प्रबंधक भी लिखेंगे - नॉकआउट के साथ यह डामर पर दो उंगलियों की तरह है ...

डेमो और स्रोत

मैं आपको मेरा पहला नॉकआउट लेख - http://habrahabr.ru/post/154003/ देखने की सलाह देता हूं। हम वहां शुरू किए गए विचारों को विकसित करेंगे।

नेटवर्क के दृश्यपटल का प्रोटोटाइप यहाँ निहित है - https://github.com/Kasheftin/uncrd ।

यह सब कैसे दिखता है, आप यहाँ देख सकते हैं - http://www.photovision.ru तस्वीरों के साथ एक साइट है जो जानबूझकर फिर से नहीं बनाई गई थी। एक स्क्रिप्ट unrd.com डोमेन से जुड़ी है, जो नेटवर्क कार्यक्षमता प्रदान करती है। फ़ोटो पर क्लिक करते समय, फ़ोटो देखने वाले की विंडो पॉप अप होनी चाहिए, आप लेखकों के प्रोफाइल पर जा सकते हैं, रजिस्टर कर सकते हैं, फ़ोटो और टिप्पणियां पोस्ट कर सकते हैं। मेरा लक्ष्य न्यूनतम स्वीकार्य कार्यक्षमता के साथ एक मानक नेटवर्क लिखना था।

रिपॉजिटरी में नेटवर्क के साथ काम करने पर प्रलेखन का एक टुकड़ा भी है, जहां अधिकांश ब्लॉक सूचीबद्ध हैं और उनके मापदंडों का वर्णन किया गया है - http://uncrd.com/docs/1.html ।

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

विपक्ष और सीएसएस

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

सिस्टम कोर

सीमांत प्रणाली के मूल और गतिशील रूप से लोड विजेट्स के होते हैं। प्रत्येक विजेट में एक js ऑब्जेक्ट होता है जो कि एक amd फॉर्म में एक अलग फाइल में होता है (उदाहरण के मेसेजफॉर्म.जेएस ) और कोड के साथ एक html टेम्पलेट (उदाहरण मेसेजफॉर्म )। हाल ही में, मैंने एक मॉड्यूलर दृष्टिकोण के साथ नॉकआउट पर कई एप्लिकेशन देखे हैं, और वे सभी इस तरह के बंधन का उपयोग करते हैं:

ko.bindingHandlers.widget = { update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var widget = ko.utils.unwrapObservable(valueAccessor().data); require([widget.templateName],function(html) { ko.renderTemplate(element,bindingContext.extend({$data:widget}),{html:html},element); if (widget.domInit) widget.domInit(elem,valueAccessor()); }); return { controlsDescendantBindings: true}; }

फिर, core.js या किसी भी विजेट में (चूंकि वे एक-दूसरे से जुड़ाव का समर्थन करते हैं), आवश्यक विजेट का उद्देश्य बनाया जाता है: इस .w = SomeWidget (); और <-! ko विजेट: {data: w} -> <! - / ko -> टेम्पलेट के सही स्थान पर कहा जाता है। मैं ध्यान देता हूं कि मूल रूप से केवल "नामित" और "आंतरिक नामहीन" टेम्पलेट्स का समर्थन करता है, और इसलिए इस मामले में रेंडरटेम्पलेट विधि इस लेख से stringTemplateEngine का उपयोग करती है।

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

 ...   ... <!-- uncrd if: user --> , <!-- uncrd text: user.name --><!-- /uncrd --> <!-- uncrd widget: 'userMenu' --><!-- /uncrd --> <!-- /uncrd --> <!-- uncrd ifnot: user --> <!-- uncrd widget: 'loginForm' --><!-- /uncrd --> <!-- /uncrd --> ...   ...

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

विंडो मैनेजर

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

मैं आपको एक सुंदर चाल के बारे में बताऊंगा। windowManager के पास एक खुला तरीका है जिसके माध्यम से किसी भी विजेट के साथ एक विंडो खुलती है खोली हुई खिड़की अपने आप में एक विजेट भी है, और इसलिए यह अपने आप को पंजीकृत करता है कि माता-पिता के बच्चों की श्रेणी में, जो windowManager है। WindowManager को इनिशियलाइज़ करते समय, हम स्पष्ट रूप से यह सेट करते हैं ।childrenWidgets = ko.observableArray ([]), और इसलिए इसे विजेट बाइंडिंग में एक साधारण सरणी द्वारा ओवरराइड नहीं किया जाता है। यहां नैकआउट की सुविधा यह है कि अवलोकन योग्य एरे में नियमित सरणी के समान पुश, पॉप, ब्याह के तरीके हैं। इसलिए, विजेट के अंदर, बंधन महत्वपूर्ण नहीं है, सामान्य एक सरणी या अवलोकनीय है। प्रत्येक खुली हुई खिड़की अब अवलोकन योग्य है। और इसका मतलब है कि आप बाद के परिवर्तनों के लिए सदस्यता ले सकते हैं, जो किया जाता है। और अब - अगर चिल्ड्रन वॉट्सएप खाली नहीं है, तो आपको साइट के पृष्ठ को डार्क करने की जरूरत है, स्थिति के साथ "नाखून" सामग्री: तय की गई और तैयार की गई खिड़कियों को दिखाएं, और यदि नहीं, तो सब कुछ वापस कर दें जैसा कि यह था।

ModalWindow3.js मोडल विंडो में सामग्री, स्थिति और ड्रैग के आकार के आधार पर बूटस्ट्रैप + पोजिशनिंग कैलकुलेशन से html है, कुछ भी अलौकिक नहीं है। एकमात्र विशेषता यह है कि आंतरिक विजेट का नाम, शीर्षक और पाद अवलोकन योग्य चर के माध्यम से उप-विजेट्स को परिभाषित किया जा सकता है, और जब पैरामीटर बदलते हैं, तो विजेट स्वचालित रूप से पुन: निर्मित होते हैं। और इसके लिए एक पंक्ति लिखना आवश्यक नहीं था - विजेट बाइंडिंग में अपडेट विधि द्वारा सब कुछ प्रदान किया जाता है।

संकेत लोड हो रहा है

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

EventEmitter विधियाँ प्रत्येक विजेट के प्रोटोटाइप में मिश्रित होती हैं। विजेट को इनिशियलाइज़ करते समय, आप एक विशेष वेरिएबल डाल सकते हैं ।requiresLoading = true, और फिर widgetBinding विजेट एसिंक्रोनस पर विचार करेगा और उससे एक तैयार घटना की उम्मीद करेगा। हालांकि, विजेट को उसके राज्य की परवाह किए बिना तुरंत प्रदान किया जाता है, और इसलिए, उसे स्वयं का ध्यान रखना चाहिए कि जब तक वह अपना डेटा तैयार नहीं कर लेता है तब तक वह इसे नहीं दिखाएगा। सरल विगेट्स में आमतौर पर वैरिएबल होता है। लोडिंग = ko.observable (ट्रू), और उनके टेम्प्लेट इस तरह दिखते हैं:

 <!-- uncrd if: loading --> <div class="uncrd-loading-with-icon">...</div> <!-- /uncrd --> <!-- uncrd ifnot: loading --> ...   ... <!-- /uncrd -->

मान लीजिए कि पृष्ठ पर एक लिंक है, जब आप उस पर क्लिक करते हैं तो आपको उपयोगकर्ता प्रोफ़ाइल के साथ एक मोडल विंडो खोलने की आवश्यकता होती है,

 <a href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123})">  #123</a>.

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

 <a href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123,loading:'after'})">  #123</a> <!--   --> <a class="uncrd-loading-after" href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123})">  #123</a>.

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

पुस्तकालयों को जोड़ना और r.js के साथ संकलन करना

मैं एक बार फिर दोहराता हूं कि नेटवर्क के लिए एक महत्वपूर्ण आवश्यकता अधिकतम स्वायत्तता है। Jquery और नॉकआउट सहित सभी पुस्तकालय, स्थानीय रूप से रहते हैं और सिस्टम के मूल से लोड होते हैं। यही कारण है कि टैग और विशेषताओं का उपयोग करके डेटा-अनचाहे = "..." देशी के बजाय और डेटा-बाइंड = "..." रोक नहीं रहा है। सभी मुख्य पुस्तकालयों और लिपियों को एक ही main.js फ़ाइल में नंगे r.js. यहाँ विन्यास build.js है । हालांकि, भविष्य में मैं और मैं सभी को सलाह दूंगा कि वे मिट्टी को आधार के रूप में इस्तेमाल करें। किसी कारण के लिए, r.js में किसी एक फ़ाइल या संपूर्ण निर्देशिका को संसाधित करना संभव है, लेकिन कर्नेल फ़ाइलों से main.js को एक क्रिया में इकट्ठा करना असंभव है + इसके बगल में विजेट का एक उपनिर्देशिका डालें। इसके अलावा, यदि आपके पास main.js फ़ाइल में requirement.config ({...}) के साथ आवश्यकता पर एक परियोजना है, तो आपको इस तथ्य के लिए तैयार रहना चाहिए कि r.js के साथ निर्माण करते समय इस कॉन्फ़िगरेशन को ध्यान में नहीं रखा जाना चाहिए - सभी पथ विधानसभा (नोड r.js -o build.js) के दौरान निर्दिष्ट build.js फ़ाइल में फिर से निर्दिष्ट किया जा सकता है।

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

अभ्यास करें, अपने विजेट लिखें

डेमो शाखा में भंडार में, मैंने सब कुछ अनावश्यक फेंक दिया। /Demo/1.html फ़ोल्डर में एक ऐसी फाइल है जो आदिम विजेट दिखाती है जिसे हम अभी लिखेंगे।

आइए शीर्ष पट्टी के विजेट से शुरू करें, जिसे डाउनलोड की आवश्यकता नहीं है, लेकिन बस शीर्ष मेनू के साथ एक बार दिखाता है। विजेट तर्क स्रोत / विजेट्स / मॉडल / topBar.js में है, यह खाली है:

 define(function() { var TopBar = function(options) { } return TopBar; });

विजेट का html टेम्प्लेट स्रोत / विजेट / टेम्प्लेट / topBar.html, एक नियमित HTML प्रकार में स्थित है:

 <div class="navbar navbar-fixed-top uncrd-topbar"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">UnCRD</a> <ul class="nav"> <li><a href="#" data-uncrd="click:o('page1')">  </a></li> <li><a href="#" data-uncrd="click:o({name:'page2',param1:'value1',loading:'after'})">   </a></li> <li><a href="#" data-uncrd="click:o({modalWindow:{header:'',content:''}})">   </a></li> </ul> <div class="loginForm" data-uncrd="widget:{name:'loginForm',template:'loginFormInline'}"></div> </div> </div> </div>

इस तथ्य के बावजूद कि TopBar में कुछ भी नहीं है, यह याद रखना चाहिए कि विजेटबाइंडिंग इवेंटइमित्र विधियों को इसमें मिलाता है, विजेट में एक सरणी है। एक तत्व सेchildrenWidgets - आंतरिक विजेट loginForm। यह भी सभी विजेट्स के लिए सामान्य तरीके हैं। यह ट्राइस्ट (सब-विजेट ट्री को हटाता है), इस.ओपन (एक विंडो को खोलता है) और यह (इसके लिए छोटा। यह, जो इसे वापस लौटाता है ।open.bind (...))।

शिकायत करें मान लीजिए कि आरंभीकरण के दौरान इसे अच्छी तरह से जॉकरी-धीमी गति से ऊपर जाना चाहिए। ऐसा करने के दो तरीके हैं। बाहर ड्राइविंग के लिए कस्टमबाइंड लिखना और इसे टेम्पलेट के मूल तत्व के साथ संलग्न करना अधिक सही है, लेकिन कभी-कभी आप मॉडल के अंदर चाहते हैं कि टेम्पलेट की DOM तक पहुंच हो, जो स्पष्ट रूप से, विजेट ऑब्जेक्ट बनाने और रेंडरटेम्पलेट लागू करने के बाद दिखाई देता है। इसके लिए डॉमिनेट विधि प्रदान की जाती है - इसे निर्दिष्ट किए जाने के बाद रेंडरटेम्पलेट के बाद बुलाया जाता है और इसमें पैरामीटर (स्वयं विजेट) होता है, तत्व (DOM तत्व जिससे विजेट बनाया जाता है) और FirstDomChild (टेम्पलेट के अंदर पहला नोड तत्व जो टाइप नोड टाइप = 1 पाया जाता है):

 define(["jquery"],function($) { var TopBar = function(options) { } TopBar.prototype.domInit = function(self,element,firstDomChild) { $(firstDomChild).hide().slideDown(); } return TopBar; });

जब आप शीर्ष बार के पहले लिंक पर क्लिक करते हैं, तो ओ ('पेज 1') विधि कहा जाता है। इसका मतलब यह है कि एक मोडल विंडो खोली जाएगी, जिसमें सामग्री / मॉडल / विजेट / मॉडल्स / पेज 1. जेएस और टेम्पलेट / विजेट्स / टैम्पलेट / पेज 1.html के साथ एक विजेट लोड किया जाएगा। इस तथ्य के बावजूद कि औपचारिक रूप से modalWindow विजेट में पेज 1 शामिल है, वास्तव में पेज 1 मुख्य है, और modalWindow सिर्फ एक बंधन है, इसलिए पेज 1 की इस.modalWindow संपत्ति में इसकी विंडो तक पहुंच है।

 define(function() { var Page1 = function(o) { var modalWindow = o.options.modalWindow; if (modalWindow) { modalWindow.width(700); modalWindow.cssPosition("absolute"); this.close = function() { modalWindow.destroy(); //      modalWindow,    modalWindow      } } else { this.close = function() { this.destroy(); } } } return Page1; });

 <div> ...   ... <a href="#" data-uncrd="click:close">    page1</a> </div>

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

चलो अतुल्यकालिक लोडिंग पर चलते हैं। पेज 2 को प्रदर्शित करने से पहले कुछ डेटा लोड करने की आवश्यकता है। हम इसे नीचे रखते हैं ।requiresLoading, हम तैयार घटना का उत्सर्जन करते हैं, यह मत भूलो कि विजेट को अनलोड डेटा के साथ तुरंत प्रदर्शित किया जा सकता है:

 define(["knockout"],function(ko) { var Page2 = function(o) { this.requiresLoading = true; this.loading = ko.observable(true); this.stringFromServer = ko.observable(null); } Page2.prototype.domInit = function(self,element,firstDomChild) { setTimeout(function() { //     self.stringFromServer("   "); self.loading(false); self.emit("ready"); },1000); } return Page2; });

 <!-- uncrd if: loading --> <div class="uncrd-loading-with-icon">...</div> <!-- /uncrd --> <!-- uncrd ifnot: loading --> <div data-uncrd="text:stringFromServer"></div> <!-- /uncrd -->

इस विजेट को सीधे टॉप बार के बगल में /demo/1.html पेज पर पेस्ट करें और पेज को फिर से लोड करें। हम देखते हैं कि विजेट में इसके डाउनलोड आइकन को प्रदर्शित करने के लिए कहीं नहीं है, इसलिए यह तुरंत खींचा जाता है और डाउनलोड आइकन को अंदर दिखाता है। हालाँकि, जब आप शीर्ष मेनू में पेज 2 लिंक पर क्लिक करते हैं, तो डाउनलोड आइकन लिंक के बगल में दिखाई देता है, और पृष्ठ के साथ मोडल विंडो तैयार दिखाई देती है।

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

 <a href="#" data-uncrd="click:o({modalWindow:{header:'',content:''}})">    </a>

परिणाम

साथ में लिखे गए सरल विगेट्स। जटिल विगेट्स रिपॉजिटरी, https://github.com/Kasheftin/uncrd में देखे जा सकते हैं। ये समान सरल विजेट हैं, केवल अधिक चमकदार हैं। प्रोटोटाइप स्तर पर प्रणाली का विकास किया जा रहा है। प्रोटोटाइप एक लाइव साइट पर कैसे काम करता है - यहां देखें: http://www.photovision.ru सभी विगेट्स और डॉक्यूमेंटेशन के टुकड़ों के साथ डेमो पेज देखें: http://uncrd.com/docs/1.html । नंगे कोर से डेमो और तीन बेवकूफ विजेट-उदाहरण डेमो शाखा से डाउनलोड किए जा सकते हैं, सब कुछ पहले से ही वहां इकट्ठा किया गया है (और रिश्तेदार पथ नीचे डाल दिए जाते हैं), आपको केवल ब्राउज़र में /demo/1.html खोलने की आवश्यकता है।

हम नॉकआउट पर एक जटिल आवेदन लिख रहे हैं। जेएस - 2