Ember.js and RequireJS

Has anyone had much success with RequireJS and Ember.js? Seeing as Ember likes to have its structure assigned to a global object I'm finding that it can really butt heads with Requirejs. Would something like LAB.js work better for Ember?

Solution 1:

EDIT (2012-01-30): I pushed a more complete example in a repo on bitbucket.

I have successfully used RequireJS to load Ember.js as well as the datetime addon (github). The Ember namespace itself stays global, but all of my application's data, including my instance of Ember.Application, is kept within modules through RequireJS. I'm also loading the handlebars templates using the 'text!' plugin.

I haven't had any issue yet, but this is not a complete application, more of a proof of concept. Here's how I made it work. I can load my application directly with Safari without the need of a server. You would still need a server to load it with Chrome, which doesn't let JavaScript load files from the filesystem.

1) Because Ember.js uses BPM/Spade, I couldn't use a clone of the repo. Instead I'm wrapping the compiled version within a module:

lib/ember.js:

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

Note that this in itself doesn't hide Ember from the global scope. But I'm setting things up so that if, in the future, I'm able to do hide it, every other module which depends on this module will still work as-is.

2) Modules can refer to Ember like so:

app/core.js:

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

Here, "Em" could have been named something else; it doesn't refer directly to the global variable, but comes from the module defined in lib/ember.js.

3) To be accessible by Ember, handlebars have to be registered:

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) I'm using require-jquery.js (jQuery and RequireJS bundled together).

Solution 2:

There is a better way to include a handlebar file which can have multiple template blocks. Which can get compiled and available in one include.

for eg: You have the following Handlebars template file:

../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;
});

Solution 3:

I've just uploaded to github a starter-kit for EmberJS+RequireJS, You could check it https://github.com/fernandogmar/Emberjs-RequireJS

Any good suggestions will be highly appreciated. Have Fun!