Ember.js et RequireJS

Question

Quelqu'un at-il eu beaucoup de succès avec RequireJS et Ember.js? Vu que Ember aime que sa structure soit assignée à un objet global, je constate qu’il peut vraiment rivaliser avec Requirejs. Est-ce que quelque chose comme LAB.js fonctionnerait mieux pour Ember?

Answer 1

EDIT (2012-01-30): j'ai poussé un exemple plus complet dans un repo sur bitbucket.

J'ai utilisé avec succès RequireJS pour charger Ember.js ainsi que de la date de l'addon (github). La Braise à l'espace de noms des séjours mondiale, mais l'ensemble de mes données de l'application, y compris mon exemple de Braise.Application, est maintenu dans des modules par le biais de RequireJS. Je suis également le chargement du guidon à l'aide de modèles de texte!' plugin.

Je n'ai pas eu de problème, mais ce n'est pas une application complète, plus d'une preuve de concept. Voici comment je l'ai fait travailler. Je peux charger ma demande directement avec Safari, sans la nécessité d'un serveur. Vous auriez encore besoin d'un serveur pour le charger avec du Chrome, ce qui ne laisse pas de JavaScript à charger des fichiers depuis le système de fichiers.

1) Parce que Ember.js utilise BPM/Bêche, je ne pouvais pas utiliser un clone de l'opération. Au lieu de cela je suis emballage de la version compilée dans un module:

lib/ember.js:

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

Notez que cela, en soi, de ne pas cacher la Braise de la portée globale. Mais je suis de remettre les choses en place, de sorte que si, dans l'avenir, je suis capable de faire le cacher, tous les autres modules qui dépend de ce module fonctionne toujours comme-est.

2) les Modules peuvent se référer à la Braise de la sorte:

app/core.js:

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

Ici, "Em" pourrait avoir été nommé quelque chose d'autre; il ne se réfèrent pas directement à la variable globale, mais vient du module défini dans lib/ember.js.

3) Pour être accessible par les Braises, le guidon doivent être enregistrés:

app/templates/mon-modèle.guidon:

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) je suis en utilisant require-jquery.js (jQuery et RequireJS regroupés).

Answer 2

Il existe un meilleur moyen d'inclure un fichier de guidon qui peut avoir plusieurs blocs de modèle. Ce qui peut être compilé et disponible dans un include.

Par exemple, vous avez le fichier de modèle de guidon suivant:

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

Je viens de télécharger sur github un kit de démarrage pour EmberJS + RequireJS, vous pouvez le vérifier à l' adresse https://github.com/fernandogmar/Emberjs-RequireJS

Toutes les bonnes suggestions seront très appréciées. S'amuser!

Answer 4

La CLI d’Ember prend en charge la syntaxe de module ES6 transmise à AMD. On dirait que la communauté se place derrière la CLI d’Ember comme le moyen privilégié d’utiliser Ember.

http://www.ember-cli.com

Answer 5

Mimosa a quelques bons exemples de projets utilisant Ember et Require.js. En voici une à la caisse: https://github.com/dbashford/mimosa-ember-emblem-templates . Les instructions pour l'obtenir sont dans le fichier README.