हॉटटॉवेल एसपीए

Question

में डूरंडल के साथ एक मॉड्यूल के लिए jQuery निर्भरता को परिभाषित करना मैं आवश्यकताजेएस को समझने की कोशिश कर रहे सर्कल में गोल और गोल कर रहा हूं और निर्भरताओं को लोड करने के लिए इसका उपयोग कैसे करें, जब मैं कोशिश करता हूं और उनका उपयोग करता हूं तो अपरिभाषित के रूप में दिखाई नहीं देता मॉड्यूल में।

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

कुछ महीनों में आगे बढ़ें और अब हमारे पास एक नमूना "सेवा" मॉड्यूल, एक सेट-अप है जो टूरंडल के साथ "हॉट टॉवेल" टेम्पलेट है, जो कि आवश्यकताजेएस दस्तावेज का पालन करता है और स्टार्टर ऐप को समझने में काफी आसान है। अलार्म घंटी बजाने वाली एकमात्र चीज यह विचार है कि अधिकांश पुस्तकालय सामान्य "स्क्रिप्ट" फ़ोल्डर में होते हैं जबकि Durandal एप्लिकेशन तर्क के साथ पूरी तरह से अलग 'ऐप' फ़ोल्डर में होता है। अगर मैंने बहुपक्षीय एसपीए पाठ्यक्रम से एक चीज सीखी है और आवश्यकता के साथ खेल रहा है तो यह है कि एक फ़ोल्डर की चीजों से बाहर चलती चीजें बहुत जल्दी गन्दा हो जाती हैं।

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

यहाँ मेरी मॉड्यूल 'dataservice.js' अंदर 'एप्लिकेशन/सेवाओं' फ़ोल्डर

define(['jquery'], 
function ($) { 
    var init - function.... 

मैं निश्चित रूप से करते हैं जब मैं कोशिश करने के लिए $ 'अनिर्धारित' और उपयोग की शुरुआत के लिए एक बहुत ही सरल घोषणा है यह मेरे कोड ब्लॉक के भीतर है। अब तक बहुत ज्यादा भ्रमित साहित्य पढ़ने के बाद (जिसमें से अधिकांश एक टिप्पणी के साथ समाप्त होता है कहने के लिए 'यह बदल में jQuery xxxx इसलिए किसी भी अधिक प्रासंगिक नहीं है') मैं निम्नलिखित प्रश्न हैं:

1. मैं जब की निगरानी नेटवर्क यातायात मैं देख सकता हूं कि jQuery लाइब्रेरी सही ढंग से डाउनलोड की जा रही है, जैसा कि mockJSON है यदि मैं इसे BundleConfig.cs में परिभाषित 'विक्रेता' बंडल में जोड़ता हूं तो jQuery वहां है और मेरे ब्राउज़र में प्रतीक्षा कर रहा है, भले ही मैंने नहीं दिया हो यह एक मॉड्यूल परिभाषा खुद है।

   require.config({ 
       paths: { 
        'text': 'durandal/amd/text', 
        jquery: '../Scripts/jquery-1.9.1' 
       } 
   }); 
   

   (। 'पाठ' घोषणा पहले से ही वहाँ था मैं बस jQuery उर्फ ​​जोड़ा) यह: मेरे मॉड्यूल दस्तावेज में 'अनिर्धारित' संदर्भ से छुटकारा पाने के लिए मैं जैसे निम्नलिखित कुछ जोड़ने की जरूरत है मतलब लग रहा था मेरे मॉड्यूल को 'अपरिभाषित' की बजाय फ़ंक्शन करने का कारण बनता है जो समस्या का हिस्सा हल करता है सिवाय इसके कि यह स्क्रिप्ट की दूसरी प्रतिलिपि का कारण बनता है जिसे मैंने पहले ही हॉट टॉवेल टेम्पलेट्स 'विक्रेता' बंडल के कारण डाउनलोड किया है। मैं स्पष्ट कारणों से jQuery की दो प्रतियां डाउनलोड नहीं करना चाहता हूं तो मैं इसे कैसे ठीक करूं?

2. मैं अपने 'विक्रेता' बंडल के mockJSON पुस्तकालय जोड़ दिया है और यह सामान्य रूप से $ .mockJSON का उपयोग कर मैं इस वैध बनाने के लिए कुछ नहीं कर सकते करने के लिए जाना जाता है। भले ही मैं उसी प्रक्रिया का उपयोग करके स्क्रिप्ट के संदर्भ में हैक करता हूं, मैंने jquery के लिए 'require.config ({पथ:' घोषणा के साथ किया है, मुझे अपरिभाषित हो रहा है, 'लाइब्रेरी दो बार डाउनलोड की गई है' समस्या का उल्लेख नहीं किया गया है मैं लाइब्रेरी निर्भरता को परिभाषित कैसे कर सकता हूं ताकि मॉड्यूल में उस लाइब्रेरी का मेरा उपयोग काम करेगा?

3. मुझे लगता है कि यह दर्द इस तथ्य के साथ कुछ करने के लिए है कि जेएस एसिंक्रोनस मॉड्यूल डाउनलोड करने के बारे में है, लेकिन jQuery और mockjson तुल्यकालिक हैं इसलिए मुझे उन्हें अन्य माध्यमों (बंडलिंग हार्ड-कोडेड संदर्भ) द्वारा डाउनलोड करना है, लेकिन इसका अभी भी मतलब है कि मेरी आवश्यकताएँ जेएस मॉड्यूल को निर्भरताओं के रूप में बताते हुए एक तरीका चाहिए और मैंने जो भी कोशिश की है वह काम नहीं कर रहा है। क्या इस बारे में मेरी धारणा एक सिंक्रोनॉय/असिंक्रोनस मुद्दा सही है? मुझे डूरंडल में कम से कम एक नमूना ऐप ढूंढने की उम्मीद थी जो jQuery और आदर्श रूप से एक jQuery प्लग-इन का उपयोग करता था, लेकिन मैं जो कुछ देख सकता हूं वह मॉड्यूल कोड है जो किसी और चीज़ के बजाए डूरंडल मॉड्यूल का उपयोग करता है। तथ्य यह है कि इन सभी पुस्तकालयों की आवश्यकता के लिए मुख्य रूट के बाहर हैं जेएस शायद समस्या को बढ़ा रहा है क्योंकि मुझे संदर्भ प्राप्त करने के लिए '../' तारों के साथ पथ का सहारा लेना है। क्या किसी को पता है कि 'दुरंदल को छोड़कर सभी पुस्तकालयों की यह संरचना एक फ़ोल्डर में क्यों है, लेकिन दुरंदल पूरी तरह से अलग है' मौजूद है?

4. मैं समझता हूं कि आवश्यक जेएस परिभाषा कमांड पर 'कॉन्फ़िगरेशन पर कॉन्फ़्रेंस' का उपयोग करता है ताकि अगर मैं मॉड्यूल आईडी को याद करता हूं तो यह मॉड्यूल स्रोत फ़ाइल नाम और डेटा का उपयोग करके निर्दिष्ट परिभाषित रूट फ़ोल्डर से पथ पर आधारित आईडी मानता है -मुख्य। हालांकि Durandal अपने कोड में 'प्रवेश' नामक एक मॉड्यूल को संदर्भित करता है। यह मॉड्यूल रूट फ़ोल्डर में नहीं है बल्कि 'Durandal/transitions/entrance.js' नामक फ़ोल्डर में है, इसलिए मैं उलझन में हूं कि इसका कोई संदर्भ 'डुरंडल/संक्रमण/प्रवेश' के बजाय 'प्रवेश' क्यों है। यह अलियासिंग कहां है?

5. अंत में (हुराह) मैंने उन निर्भरताओं को छोड़कर एक परिभाषित बयान बनाम पहले तर्क (एक स्ट्रिंग सरणी) के रूप में निर्भरताओं को निर्दिष्ट करने के बीच अंतर की सूक्ष्मता को समझ नहीं लिया है, लेकिन फिर मॉड्यूल फैक्ट्री में जो पहला तर्क बन जाता है var system = requ ('../ system') की तरह कुछ निर्दिष्ट करना - मैं एक रूप में प्राथमिकता में एक रूप का उपयोग क्यों करूंगा। मैं नमूना आवेदन में दो प्रकार मिश्रित देख रहा हूं और समझ में नहीं आता क्यों।

पीएस: जब मैं इस प्रविष्टि को संपादित करता हूं तो मुझे पांच प्रश्न 1 से 5 अंक दिखाई देते हैं। जब मैं इसे देखता हूं तो मुझे लगता है कि इसे 1 और फिर 1 से 4 के रूप में प्रस्तुत किया जाता है। कुछ अजीब HTML संपादक बनाम बग प्रतिपादित करते हैं कि इससे कोई फर्क नहीं पड़ता कि मैं किस प्रारूप को कोशिश करता हूं I टी ठीक करने में सक्षम नहीं है, इसलिए कृपया कोई टिप्पणी पोस्ट करें जैसे कि 2 अंकों के बजाय 1 से 5 अंक वाले पांच प्रश्न हैं और तीन क्रमांकित 2 से 4 अंक हैं!)

Answer 1

वाह यह बहुत सारे प्रश्न हैं! https://groups.google.com/forum/#!searchin/durandaljs/papa/durandaljs/Ku1gwuvqPQQ/gupgNqGIK1MJ

धागे से दिलचस्प बात जॉन पिताजी, गर्म तौलिया टेम्पलेट के लेखक, अपने सभी तृतीय पक्ष लाइब्रेरी को लोड करके सामने स्क्रिप्ट का उपयोग कर सिफारिश की है कि है: Durandal गूगल समूह पर इस पोस्ट को बाहर

चेक टैग या बंडल और फिर बस अपने मॉड्यूल के लिए आवश्यकता/एएमडी दृष्टिकोण का उपयोग कर। आपके स्वयं के मॉड्यूल को jquery ($) और knockout (ko) के वैश्विक गुणों का संदर्भ देना चाहिए।

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

दृष्टिकोण आर्किटेक्चररी रूप से साफ नहीं है, मैं स्वीकार करूंगा, लेकिन 5 दिनों के लिए डुरंडल पर सिर डालने के बाद मैं तीसरे पक्ष के पुस्तकालयों को सामने लोड करना पसंद कर रहा हूं।

Answer 2

ओह पीट के लिए ओह! मैं इन सब के माध्यम से wade नहीं कर सका।

यदि आपके पास jQuery और इंजेक्शन इंजेक्शन लगाने पर आपका दिल सेट है और ऐसा है, तो यह परिभाषित करने से पहले कि यह चीजें हो रही है, परिभाषित करने से पहले इसे अपने मुख्य.जेएस में रखें।

 
var root = this; // the global namespace, window 

// The following are already loaded via bundles 
// which put them in the root object. Add them as services. 
define('jquery', [], function() { return root.jQuery; }); 
define('ko', [], function() { return root.ko; }); 
define('breeze', [], function() { return root.breeze; }); 
define('Q', [], function() { return root.Q; }); 
define('moment', [], function() { return root.moment; }); 
define('sammy', [], function() { return root.Sammy; }); 
define('toastr', [], function() { return root.toastr; }); 

संतुष्ट? :)

Answer 3

त्वरित कोड उत्तर नीचे है। कुछ कहीं (संभवतः दुरंदल में) किसी भी मॉड्यूल के बिना jQuery को उपलब्ध करा रहा है जो इसे निर्भरता के रूप में घोषित करने के लिए उपयोग करता है (मुझे लगता है कि डुरंडल कोड में कहीं परिभाषित कथन है लेकिन बिना किसी विशिष्ट नमूने के इसे समझना मुश्किल है। मुझे लगता है कि बहुत कम वहाँ लोग jQuery या प्लग-इन (कटाक्ष) का उपयोग कर रहे हैं)। उम्मीद है कि जॉन पापा के आने वाले "हॉट टॉवेल" पाठ्यक्रम इन सवालों में से कुछ मुद्दों/मुद्दों से निपटेंगे। और सिर्फ jQuery ही नहीं बल्कि प्लग-इन भी।

** jQuery प्लगइन समस्या को हल करने की चाल, जो कि मेरी टीम पूछ रहे सभी प्रश्नों के पीछे असली समस्या है, main.js फ़ाइल की शुरुआत में निम्न आदेश है जो आवश्यकतानुसार स्क्रिप्ट संदर्भ द्वारा इंगित किया गया है :

require.config({ 
paths: { 
    'text': 'durandal/amd/text', 
    'mockjson': '../Scripts/jquery.mockjson.js' 
}, 
shim: { 
    'mockjson': { 
     deps: ['jquery'], 
     exports: ['mockJSON'] 
    } 
} 

});

ध्यान दें कि mockJSON लाइब्रेरी को एक बंडल में जोड़ा जाना होगा (मैंने 'विक्रेता' का उपयोग किया था लेकिन आप एक नया बंडल जोड़ सकते हैं) और यह कि वे मुख्य बिंदु यह है कि यह एक jQuery प्लगइन है क्योंकि आपको इसे एक घोषित नहीं करना चाहिए आपके किसी भी मॉड्यूल में निर्भरता जिसके लिए इसकी आवश्यकता होती है (या कम से कम यह मेरे लिए काम करता है)।

मूल प्रश्नों की लंबाई के लिए खेद है लेकिन वास्तविकता यह है कि मेरे पास एक टीम है जो इन सवालों के जवाब चाहते हैं, उन्हें वेब पर नहीं मिल सकती है और लिखने के समय केवल जॉन पापा से कोड कैंपर ऐप है आगे बढ़ने के लिए - एक ऐप जिसमें एक अच्छा कोर्स है और यह एक महान प्रारंभिक बिंदु है यदि आप विभिन्न पुस्तकालयों को एक साथ तार करने के लिए बहुत सारे नलसाजी कोड लिखना चाहते हैं (हम नहीं करते हैं। हमें उत्पादक होने की आवश्यकता है, हालांकि कोड एक महान है समझने का तरीका डरंडल जैसे नए ढांचे आपके लिए कोडिंग पर अधिक सरल 'सम्मेलन' दृष्टिकोण के माध्यम से आपके लिए कोडिंग कर रहे हैं)। हमारी टीम के लिए उस कोर्स के साथ समस्या यह है कि जब आप कोड में खोदते हैं, तो आप उत्तर पाने के मुकाबले अधिक प्रश्न पूछते हैं (उदाहरण के लिए "जब मैं पुस्तकालयों को एक बड़े फ़ोल्डर में सबकुछ के बजाय अपने स्वयं के उप-फ़ोल्डर में क्यों ले जाता हूं आवश्यकताएँ जेएस ने एक त्रुटि फेंक दी है जो कहती है, "आप मेरी पीठ के पीछे पुस्तकालयों को लोड कर रहे हैं। मुझे ऐसा करने दें और मेरी पीठ के पीछे ऐसा न करें", "कुछ पुस्तकालयों का उपयोग करने के साथ कोड क्यों दूर हो रहा है जो अंदर नहीं हैं बंडल और जो खोज केवल 'more.info.txt' फ़ाइल में होने के रूप में दिखाती है जिसका उपयोग/इरादा कभी समझाया नहीं गया है? ";" मॉड्यूल नामकरण सम्मेलन क्यों हैं जो किसी डॉट डेलीमीटर और स्लैश डिलीमीटर के बीच भिन्न कारण नहीं हैं (या कम से कम एक जिसे कभी समझाया नहीं गया है? "" स्क्रिप्ट फाइलों में बंडलों में संदर्भ क्यों हैं जो समाधान में नहीं हैं (क्या यह सिर्फ अप्रयुक्त मलबे को ऐप के विकास के दौरान हटाया नहीं गया है)? "लेखक क्यों चले गए हैं NetEye IsBusy सूचक पुस्तकालय अपनी पुस्तकालय के बाहर और इसे हाय में एक स्क्रिप्ट के रूप में नामित किया स्वयं की 'कोलाइट' लाइब्रेरी? "आदि आदि

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

मैं किसी को एक सभ्य requireJS पाठ्यक्रम ;-)

Answer 4

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

दोनों काम करते हैं लेकिन यदि आप पथ और शिम का उपयोग करते हैं, तो सभी निर्भरताओं को भी इसी तरह पंजीकृत होना होगा। "JQuery.fn.extend ..." के उपयोग करने वाले प्लगइन के लिए यह विशेष रूप से सच है।

http://durandaljs.com/documentation/Conversion-Guide/