आवश्यकता लोकल फ़ाइल को गतिशील रूप से Requjs

Question

का उपयोग कर लोड करें मेरे पास एक एकल पृष्ठ मैरियनेट ऐप है जिसे RequJS पर बनाया गया है जिसे अनुवादों का समर्थन करने की आवश्यकता है।

मेरा लक्ष्य प्रत्येक भाषा के लिए एक शब्दकोश फ़ाइल होना है, और लॉग इन उपयोगकर्ता के कॉन्फ़िगरेशन के आधार पर, प्रासंगिक फ़ाइल लोड करें।

चूंकि अधिकांश उपयोगकर्ता अंग्रेजी का उपयोग करेंगे, इसलिए मैं निर्माण के दौरान ऐप में अंग्रेजी शब्दकोश को बंडल करना चाहता हूं (r.js का उपयोग करके)।

//in myTranslator.js 
define(function (require) { 
    "use strict"; 

    var Jed = require("jed"); 
    var localeData = require("json!locales/en_US.json"); 

    var Translator = function() { 
     var i18n = new Jed({ 
      "domain": "messages", 
      "locale_data": localeData 
     }); 
     return i18n; 
    }; 
    return Translator; 
}); 

//in app.js 
define(function(require){ 
    var Translator = require("myTranslator"); 
    var translator = new Translator(); 
}); 

आप देख सकते हैं, स्थान डेटा स्थिर फ़ाइल से भरी हुई है:

मैं एक छोटे से अनुवादक मॉड्यूल, जो मूल रूप से jed.js लपेटता (पुस्तकालय मैं i18n के लिए उपयोग कर रहा हूँ) लिखा था। मैं ट्रांसलेटर कन्स्ट्रक्टर को लोकेल में पास करने में सक्षम होना चाहता हूं, और उस पर आधारित, सही JSON फ़ाइल लोड करें।

निर्मित जेएसओएन को निर्मित परियोजना के साथ बंडल रखने के साथ यह कैसे किया जा सकता है?

Answer 1

यह वह समाधान है जिसे मैं कर रहा हूं। यह काफी अच्छी तरह से काम किया, और मैंने $ का उपयोग करने के बारे में भी सीखा। डिफर्ड जो महान था!

मेरे लिए कुंजी कोड में लोडर के रूप में आवश्यक टेक्स्ट प्लगइन का उपयोग कर रहा था।

डिफ़ॉल्ट लोकेल निर्भरता के रूप में सेट किया गया है, इस तरह यह निर्माण में भी बेक किया गया है।

स्पष्टीकरण नीचे कोड में हैं:

//in translator.js 
define(function (require) { 
    "use strict"; 

    var $ = require("jquery"); 
    var _ = require("underscore"); 
    var Jed = require("jed"); 
    var text = require("text"); 
    var defaultDictionary = require("json!locales/en_US.json"); 

    var Translator; 

    Translator = (function() { 
     var DEFAULT_LOCALE = "en_US"; 
     var defaultLocaleData = { 
      locale: DEFAULT_LOCALE, 
      dictionary: defaultDictionary 
     }; 

     var createTranslator = function (localeData) { 
      //create the actual Jed instance with the relevant dictionary 
      var i18n = new Jed({ 
       "domain": "messages", 
       "locale_data": localeData.dictionary 
      }); 
      return i18n; 
     }; 
     var parseLocaleDictionary = function (locale, dictionary) { 
      //parse the dictionary JSON string loaded by text plugin... 
      //handle errors in parsing if needed 
     }; 
     //get to work here 
     var getTranslatorForLocale = function (locale) { 
      //$gettingData promise will be resolved when data for Jed is loaded and ready 
      var $gettingData = $.Deferred(); 
      //$creatingTranslator promise will be returned to caller and will be resolved when everything's done 
      var $creatingTranslator = $.Deferred(); 

      if (!locale || locale === DEFAULT_LOCALE) { 
       //default locale, so resolve right away because we required it already 
       $gettingData.resolve(defaultLocaleData); 
      } 
      else { 
       //need to load the dictionary from here 
       var dictionaryUrl = require.toUrl("locales/" + locale + ".json"); 
       //this is the dynamic loading 
       text.get(
        dictionaryUrl, 
        function (dictionary) { 
         //if successful, parse the JSON string and use that dictionary 
         var localeData = parseLocaleDictionary(locale, dictionary); 
         $gettingData.resolve(localeData); 
        }, 
        function (error) { 
         //on load error, use the default and resolve promise 
         $gettingData.resolve(defaultLocaleData); 
        }); 
      } 

      //once the data is ready, we can create the translator instance 
      $gettingData.done(function (localeData) { 
       var i18n = createTranslator(localeData); 
       //notify caller that translator is ready 
       $creatingTranslator.resolve(i18n); 
      }); 

      return $creatingTranslator.promise(); 
     }; 

     return { 
      //this function is returned to the user of Translator 
      getTranslator: function (locale) { 
       var $gettingTranslator = getTranslatorForLocale(locale); 
       return $gettingTranslator; 
      } 
     }; 
    }()); 

    return Translator; 
}); 
//in app.js 
define(function (require) { 
    var Translator = require("translator"); 
    //in app.js 
    var myTranslator; 
    var userLocale = "fr_FR"; 
    //this is a promise that will be resolved when translator is ready 
    var $getTranslator = Translator.getTranslator(userLocale); 
    //when translator is ready, store it 
    $getTranslator.done(function (translator) { 
     myTranslator = translator; 
    }); 
    //... 
}); 

Answer 2

आपको उपयोगकर्ता सेटिंग्स की जांच करने, निर्भरता स्ट्रिंग बनाने, अनुवादक को पास करने में सक्षम होना चाहिए और फिर लोकेलडेटा के बजाय इसका उपयोग करना चाहिए - r.js गतिशील निर्भरता को अनदेखा कर देगा लेकिन एन लोकेल को बंडल करना चाहिए।

if (userLocale && userLocale !== 'en_US') { 

    var localePath = 'json!locales/' + userLocale + '.json'; 
    require([ localePath ], function(locale) { 
     var translator = new Translator(locale); 
    }); 

} 

और अनुवादक के अंदर: "locale_data": passedData || englishData।

यह काम करना चाहिए, हालांकि आप cannot use simplified CommonJS यहाँ (या अनुवादक मॉड्यूल के अंदर ही, if (userLocale !== 'en_US') { require([path], function(locale) {...}) पसंद करते हैं)

सिद्धांत रूप में और कॉलबैक-आवश्यकता का उपयोग करना चाहिए, अन्यथा आप Module name ... has not been loaded yet for context त्रुटि प्राप्त होगी।