Ember.js e RequireJS

Question

Qualcuno ha avuto molto successo con RequireJS ed Ember.js? Visto che a Ember piace avere la sua struttura assegnata a un oggetto globale, sto scoprendo che può davvero fare a pugni con Requirejs. Qualcosa come LAB.js funzionerà meglio con Ember?

Answer 1

EDIT (2012-01-30): ho inviato un esempio più completo in un repo su bitbucket.

Ho usato con successo RequireJS per caricare Ember.js e l'addon datetime (github). Lo spazio dei nomi Ember rimane globale, ma tutti i dati della mia applicazione, inclusa la mia istanza di Ember.Application, sono conservati all'interno dei moduli attraverso RequireJS. Sto anche caricando i modelli manubri usando il 'testo!' collegare.

Non ho ancora avuto alcun problema, ma questa non è un'applicazione completa, più una dimostrazione del concetto. Ecco come l'ho fatto funzionare. Posso caricare la mia applicazione direttamente con Safari senza bisogno di un server. Avresti comunque bisogno di un server per caricarlo con Chrome, che non consente a JavaScript di caricare file dal filesystem.

1) Poiché Ember.js utilizza BPM/Spade, non è possibile utilizzare un clone del repository. Invece sto avvolgendo la versione compilata all'interno di un modulo:

lib/ember.js:

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

Si noti che questo di per sé non nasconde Ember dal campo di applicazione globale. Ma sto preparando le cose in modo che se in futuro potrò nasconderlo, ogni altro modulo che dipende da questo modulo funzionerà ancora così com'è.

2) I moduli possono fare riferimento a Ember in questo modo:

app/Core.js:

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

Qui, "Em" avrebbe potuto essere chiamato in qualche altro; non si riferisce direttamente alla variabile globale, ma proviene dal modulo definito in lib/ember.js.

3) siano accessibili da Ember, manubri devono essere registrati:

app/templates/my-template.handlebars:

MyApp v{{MyApp.VERSION}}. 

app/views/my- 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) Sto usando require-jquery.js (jQuery e RequireJS raggruppati insieme).

Answer 2

C'è un modo migliore per includere un file manubrio che può avere più blocchi modello. Quale può essere compilato e disponibile in un solo include.

per esempio: avete il seguente file modello Manubrio:

../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

I Ho appena caricato su GitHub un kit di avviamento per EmberJS + RequireJS, puoi verificarlo https://github.com/fernandogmar/Emberjs-RequireJS

Qualsiasi buon suggerimento sarà molto apprezzato. Divertiti!

Answer 4

Mimosa ha alcuni progetti di esempio con Ember e Require.js. Ecco uno al checkout: https://github.com/dbashford/mimosa-ember-emblem-templates. Le istruzioni per farlo funzionare sono nel README.

Answer 5

Ember CLI supporta la sintassi del modulo ES6 che traspone su AMD. Sembra che la comunità si stia avvicinando alla CLI di Ember come il modo preferito di usare Ember.

http://www.ember-cli.com