Ember.js y RequireJS

Question

alguien ha tenido mucho éxito con RequireJS y Ember.js? Viendo que a Ember le gusta tener su estructura asignada a un objeto global, estoy descubriendo que realmente puede toparse con Requirejs. ¿Algo como LAB.js funcionaría mejor para Ember?

Answer 1

EDIT (2012-01-30): Hice un ejemplo más completo en un repo en bitbucket.

He utilizado satisfactoriamente RequireJS para cargar Ember.js y el complemento de fecha y hora (github). El espacio de nombre Ember en sí mismo se mantiene global, pero todos los datos de mi aplicación, incluida mi instancia de Ember.Application, se mantienen dentro de los módulos a través de RequireJS. También estoy cargando las plantillas de manubrios usando el 'texto'. enchufar.

no he tenido ningún problema, sin embargo, pero esto no es una aplicación completa, más de una prueba de concepto. Así es como lo hice funcionar. Puedo cargar mi aplicación directamente con Safari sin necesidad de un servidor. Todavía necesitaría un servidor para cargarlo con Chrome, que no permite que JavaScript cargue archivos del sistema de archivos.

1) Como Ember.js usa BPM/Spade, no pude usar un clon del repositorio. En lugar de eso estoy envolviendo la versión compilada dentro de un módulo:

lib/ember.js:

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

Tenga en cuenta que esto en sí mismo no oculta Ember desde un ámbito global. Pero estoy configurando las cosas para que, en el futuro, pueda ocultarlas, cualquier otro módulo que dependa de este módulo seguirá funcionando como está.

2) Los módulos pueden referirse a Ember, así:

app/Core.js:

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

Aquí, "Em" podría haber sido nombrado otra cosa; no se refiere directamente a la variable global, sino que proviene del módulo definido en lib/ember.js.

3) para que sea accesible por Ember, manillares tienen que ser registrados:

app/templates/my-template.handlebars:

MyApp v{{MyApp.VERSION}}. 

app/views/mi- 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) estoy usando requerir-jquery.js (jQuery y RequireJS agrupados).

Answer 2

Hay una mejor manera de incluir un archivo de manillar que puede tener varios bloques de la plantilla. Que pueden compilarse y estar disponibles en uno incluyen.

por ejemplo: Usted tiene el siguiente archivo de plantilla Manillar:

../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 Acabo de subir a github un kit de inicio para EmberJS + RequireJS. Puede verificarlo https://github.com/fernandogmar/Emberjs-RequireJS

Cualquier buena sugerencia será muy apreciada. ¡Que te diviertas!

Answer 4

Mimosa tiene algunos buenos proyectos de ejemplo que usan Ember y Require.js. Aquí hay uno para pagar: https://github.com/dbashford/mimosa-ember-emblem-templates. Las instrucciones para hacerlo funcionar están en el archivo README.

Answer 5

Ember CLI es compatible con la sintaxis del módulo ES6 que se transpone a AMD. Parece que la comunidad está detrás de Ember CLI como la forma preferida de usar Ember.

http://www.ember-cli.com