web-dev-qa-db-fra.com

Ember.js et RequireJS

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 trouve qu'il peut vraiment se faire la tête avec Requirejs. Est-ce que quelque chose comme LAB.js fonctionnerait mieux pour Ember?

javascriptember.jsrequirejs
34
Jonesy

[~ # ~] 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 l'addon datetime ( github ). L'espace de noms Ember lui-même reste global, mais toutes les données de mon application, y compris mon instance d'Ember.Application, sont conservées dans les modules via RequireJS. Je charge également les modèles de guidon à l'aide du texte !' brancher.

Je n'ai pas encore eu de problème, mais ce n'est pas une application complète, plutôt une preuve de concept. Voici comment je l'ai fait fonctionner. Je peux charger mon application directement avec Safari sans avoir besoin d'un serveur. Vous auriez toujours besoin d'un serveur pour le charger avec Chrome, qui ne permet pas à JavaScript de charger des fichiers à partir du système de fichiers.

1) Parce qu'Ember.js utilise BPM/Spade, je ne pouvais pas utiliser un clone du dépôt. Au lieu de cela, j'emballe 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 ne cache pas Ember de la portée globale. Mais je configure les choses de sorte que si, à l'avenir, je suis capable de le cacher, tous les autres Le module qui dépend de ce module fonctionnera toujours tel quel.

2) Les modules peuvent faire référence à Ember comme ceci:

app/core.js:

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

Ici, "Em" aurait pu être nommé autrement; il ne fait pas directement référence à la variable globale, mais provient du module défini dans lib/ember.js.

3) Pour être accessible par Ember, les guidons doivent être enregistrés:

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) J'utilise require-jquery.js (jQuery et RequireJS sont regroupés).

31
Claude Précourt

Il existe une meilleure façon d'inclure un fichier de guidon qui peut avoir plusieurs blocs de modèle. Qui peut être compilé et disponible en un seul.

par exemple: Vous disposez du 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;
});
8
Rohan Chitambar

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

Toute bonne suggestion sera très appréciée. S'amuser!

3
Fernando Gm

Ember CLI prend en charge la syntaxe du module ES6 qui se transpile vers AMD. On dirait que la communauté prend du retard Ember CLI comme moyen préféré d'utiliser Ember.

http://www.ember-cli.com

3
Christos

Mimosa a quelques bons exemples de projets utilisant Ember et Require.js. En voici un à vérifier: https://github.com/dbashford/mimosa-ember-emblem-templates . Les instructions pour le lancer se trouvent dans le README.

0
David Bashford