Ember.js और RequJS

Question

क्या किसी को RequJS और Ember.js के साथ बहुत सफलता मिली है? एम्बर के रूप में देखकर इसकी संरचना एक वैश्विक वस्तु को सौंपा गया है, मुझे लगता है कि यह वास्तव में आवश्यकता के साथ बट बट कर सकता है। क्या एलएबी.जेएस एम्बर के लिए बेहतर काम करेंगे?

Answer 1

EDIT (2012-01-30): मैंने बिटबकेट पर repo में एक और पूर्ण उदाहरण धक्का दिया।

मैंने Ember.js के साथ-साथ डेटाटाइम एडन (github) लोड करने के लिए सफलतापूर्वक RequJS का उपयोग किया है। एम्बर नेमस्पेस स्वयं वैश्विक रहता है, लेकिन मेरे सभी एप्लिकेशन के डेटा, जिसमें एम्बर.एप्लिकेशंस के मेरे उदाहरण शामिल हैं, को RequJS के माध्यम से मॉड्यूल के भीतर रखा जाता है। मैं 'टेक्स्ट!' का उपयोग कर हैंडलबार टेम्पलेट्स भी लोड कर रहा हूं। लगाना।

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

1) क्योंकि एम्बर.जेएस बीपीएम/स्पेड का उपयोग करता है, मैं रेपो के क्लोन का उपयोग नहीं कर सका। इसके बजाय मैं एक मॉड्यूल के भीतर संकलित संस्करण लपेटकर हूँ:

lib/ember.js:

define(['jquery', 
     'plugins/order!lib/ember-0.9.3.js', 
     'plugins/order!lib/ember-datetime.js'], 
     function() { 
      return Ember; 
}); 

ध्यान दें कि अपने आप में इस वैश्विक दायरे से एंबर छिपा नहीं है। लेकिन मैं चीजों को स्थापित कर रहा हूं ताकि भविष्य में, मैं इसे छिपाने में सक्षम हूं, इस मॉड्यूल पर निर्भर हर दूसरे मॉड्यूल अभी भी काम करेगा।

2) मॉड्यूल तो जैसे एंबर का उल्लेख कर सकते हैं:

एप्लिकेशन/core.js: और

define(['lib/ember'], function(Em) { 
    MyApp = Em.Application.create({ 
     VERSION: "0.0.1" 
    }); 
    return MyApp; 
}); 

यहाँ, "एम" नाम दिया गया है हो सकता है कुछ; यह सीधे वैश्विक चर को संदर्भित नहीं करता है, लेकिन lib/ember.js में परिभाषित मॉड्यूल से आता है।

एप्लिकेशन/टेम्पलेट्स/मेरी-template.handlebars:

MyApp v{{MyApp.VERSION}}. 

एप्लिकेशन/विचारों/मेरी-

3) एंबर द्वारा सुलभ होना करने के लिए, हैंडल पंजीकृत किया जाना है View.js:

define(['lib/ember', 
     'plugins/text!app/templates/my-template.handlebars'], 
     function(Em, myTemplateSource) { 

      Em.TEMPLATES["my-template"] = Em.Handlebars.compile(myTemplateSource); 

      var myView = Em.View.create({ 
       templateName: "my-template"; 
      }); 

      return myView; 
}); 

4) मैं की आवश्यकता है-jquery.js (jQuery और RequJS एक साथ बंडल)।

Answer 2

एक हैंडलबार फ़ाइल को शामिल करने का एक बेहतर तरीका है जिसमें एकाधिक टेम्पलेट ब्लॉक हो सकते हैं। जो संकलित और एक में उपलब्ध हो सकता है शामिल हैं।

उदाहरण के लिए

: आप निम्नलिखित Handlebars टेम्पलेट फ़ाइल है:

../templates/sample.handlebars

<div><!-- just a filler html tag. Wont show up in your page --> 
    <script type="text/x-handlebars" data-template-name="template1"> 
     Some Html or Template Content ... 
    </script> 
    <script type="text/x-handlebars" data-template-name="template2"> 
     Some Html or Template Content ... 
    </script> 
    <script type="text/x-handlebars" data-template-name="template3"> 
     Some Html or Template Content ... 
    </script> 
</div> 

../views/sampleView.js

define([ 
    'jquery', 
    'lib/ember', 
    'plugins/text!../templates/sample.handlebars'], 
    function($, Em, myTemplateSource) { 

     // Bootstrap method accepts a context element under which all handlebars 
     // template blocks are defined. The filler <div> in this case. 
     // Compiles and assigns to the EM.TEMPLATES hash correctly. 
     Em.Handlebars.bootstrap($(myTemplateSource)); 

     var myView = Em.View.create({ 
      templateName: "template1"; 
     }); 

     return myView; 
}); 

Answer 3

मैं मैंने अभी एम्बरजेएस + आवश्यकताजेएस के लिए स्टार्टर-किट को जिथब पर अपलोड किया है, आप इसे देख सकते हैं https://github.com/fernandogmar/Emberjs-RequireJS

किसी भी अच्छे सुझाव की अत्यधिक सराहना की जाएगी। मज़े करो!

Answer 4

मिमोसा में एम्बर और Requ.js का उपयोग करके कुछ अच्छी उदाहरण परियोजनाएं हैं। चेकआउट करने के लिए यहां एक है: https://github.com/dbashford/mimosa-ember-emblem-templates। इसे जाने के निर्देश इसे रीडमे में हैं।

Answer 5

एम्बर सीएलआई ES6 मॉड्यूल सिंटैक्स का समर्थन करता है जो एएमडी को पारदर्शी करता है। ऐसा लगता है कि एम्बर सीएलआई के पीछे एम्बर का उपयोग करने के पसंदीदा तरीके के रूप में समुदाय मिल रहा है।

http://www.ember-cli.com