Ember.js and RequireJS

by

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

More Related Contents:

  1. EmberJS: How to load multiple models on the same route?
  2. Mismatched anonymous define() module
  3. Prevent RequireJS from Caching Required Scripts
  4. Relation between CommonJS, AMD and RequireJS?
  5. How can I execute array of promises in sequential order?
  6. Why use Object.prototype.hasOwnProperty.call(myObj, prop) instead of myObj.hasOwnProperty(prop)?
  7. Loading Backbone and Underscore using RequireJS
  8. Dynamic require in RequireJS, getting “Module name has not been loaded yet for context” error?
  9. Does it make sense to use Require.js with Angular.js? [closed]
  10. How to handle circular dependencies with RequireJS/AMD?
  11. How do you create a custom adapter for ember.js?
  12. How to load bootstrapped models in Backbone.js while using AMD (require.js)
  13. How to make embedded hasMany relationships work with ember data
  14. How can I mock dependencies for unit testing in RequireJS?
  15. Requirejs why and when to use shim config
  16. RequireJS: How to define modules that contain a single “class”?
  17. Difference between RequireJS and CommonJS
  18. What is ‘define’ used for in JavaScript (aside from the obvious)?
  19. Using RequireJS, how do I pass in global objects or singletons around?
  20. How to disable the warning ‘define’ is not defined using JSHint and RequireJS
  21. Ember transition & rendering complete event
  22. Ember without Ember Data
  23. how can I invoke an ember component dynamically via a variable?
  24. using requirejs to load npm packages
  25. ember.js + handlebars: render vs outlet vs partial vs view vs control
  26. Is it possible to stop requireJS from adding the .js file extension automatically?
  27. Rendering resolved promise value in Ember handlebars template
  28. How to import a js library without definition file in typescript file
  29. Node JS fs module inside browser
  30. JavaScript Minesweeper – Opening whole mine-free area at once not working properly (flood-fill)

Leave a Comment