javascript - start - Ember.js y RequireJS

ember s proxy

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

Acabo de subir a github un kit de inicio para EmberJS + RequireJS, puedes consultarlo https://github.com/fernandogmar/Emberjs-RequireJS

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

Answer 2

Ember CLI admite 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

Answer 3

Hay una mejor manera de incluir un archivo de manillar que puede tener múltiples bloques de plantillas. Que pueden compilarse y estar disponibles en uno incluyen.

por ejemplo: tiene el siguiente archivo de plantilla de manubrios:

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

Mimosa tiene algunos buenos ejemplos de proyectos 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

EDITAR (30-01-2013): Puse un ejemplo más completo en un repo en bitbucket.

He utilizado satisfactoriamente RequireJS para cargar Ember.js y el complemento datetime ( 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.

Todavía no he tenido ningún problema, pero esta no es una aplicación completa, sino más bien 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) Debido a que Ember.js usa BPM / Spade, no pude usar un clon del repositorio. En cambio, 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 a Ember del alcance 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 de otra manera; no se refiere directamente a la variable global, sino que proviene del módulo definido en lib / ember.js .

3) Para ser accesible por Ember, los manubrios deben estar registrados:

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) Estoy usando require-jquery.js (jQuery y RequireJS agrupados).