EmberJS + RequireJS Starter kit with new EmberJS router

StackOverflow https://stackoverflow.com/questions/22786753

Question

First I'm an EmberJS and RequireJS beginner so please keep in mind that I will probably be a bit lost on some concepts.

Here is the problem. I'm trying to get started with EmberJS using RequireJS as a dependency manager. I already found some starter kit but they all uses the old router of EmberJS so it's never working with the updated packages. (It uses the old syntax to define routes)

My current application hierarchy is 

/
-- /css
-- /img
-- /js
---- /app
------ /controllers
------ /models
------ /views
------ app.js
------ router.js
---- /libs (All libraries are inside)
---- config.js
---- main.js
-- /templates (Html templates)
-- index.html

My index.html contains 

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="fr" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Title</title>
    <meta name="description" content="Description">
    <meta name="author" content="Author">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="stylesheet" href="css/style.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script data-main="js/main" src="js/libs/require-2.1.11.min.js"></script>
    </head>
    <body id="app">
    </body>
</html>

I will be happy to share the result once we solve the problems. If you need any other info on my code, please ask.

Best regards.

EDIT: My config.js contains 

define({
    app_name: "App_name",
    shim: {
       'ember': {
           deps: ['handlebars', 'jquery'],
           exports: 'Ember'
       },
       'ember_data': {
           deps: ['ember'],
           exports: 'DS'
       }
    },
    paths: {
       'App': 'app/main',
       'models': 'app/models',
       'views': 'app/views',
       'controllers': 'app/controllers',
       'templates': '../templates',
       /*libs*/
       'jquery': 'libs/jquery-2.1.0.min',
       'handlebars': 'libs/handlebars-1.3.0.min',
       'ember': 'libs/ember-1.4.0.min',
       'ember_data': 'libs/ember-data-1.0.0-beta7.min',
       /*requirejs-plugins*/
       'text': 'libs/requirejs-plugins/text',
       'tpl': 'libs/requirejs-plugins/hbs',
       'domReady': 'libs/requirejs-plugins/domReady',
       /*hbs dependancies*/
       'hbs/underscore': 'libs/hbs/underscore',
       'hbs/i18nprecompile': 'libs/hbs/i18nprecompile',
       'hbs/json2': 'libs/hbs/json2'
    },
    /*hbs plugin options*/
       hbs: {
       helpers: true,
       i18n: false,
       templateExtension: 'html',
       partialsUrl: ''
    }
});

I shouldn't have said that it's failing, it's more that it's not using the right format to declare routes. 

define(["ember"], function(Ember) {
    var Router = Ember.Router.extend({
        root: Ember.Route.extend({
            index: Ember.Route.extend({
            route: '/'
            }),
            otherRoute: Ember.Route.extend({
                route: '/other'
            })
        })
    });

    return Router;
});
Was it helpful?

Solution

While the standard solution is to use something like ember-app-kit or ember-cli, which use a custom resolver to eliminate the need for a global namespace like App, it is possible to get Ember to work with RequireJS without using a custom resolver. You just have to pass around the global namespace.

First, create an app.js:

define([
    "ember"
], function(Ember) {
    var App = Ember.Application.create();
    App.deferReadiness();

    return App;
});

Then define your router like this:

define([
    "ember",
    "app"
], function(Ember, App) {

    App.Router.map(function () {
        this.route('someRoute');
        // ...
    });

    return App.Router;
});

And your files like this:

define([
    "ember",
    "app"
], function(Ember, App) {

    App.SomeRoute = Ember.Route.extend({
        // ...
    });

    return App.SomeRoute;
});

Then in your main.js:

(function(root){
    require(["config"], function(config){
        requirejs.config(config);
        require([
            "app",
            "models/someModel",
            "models/store",
            "adapters/someAdapter",
            "controllers/someController",
            "views/someView",
            "router",
            "routes/someRoute",
            // ...
        ], function(App) {
            App.advanceReadiness();
        });
    });
})(this);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top