EmberJs routing

Question

I am trying to create EmberJs / RequireJs application and ran into a problem. According to examples, I defined my app.js like this:

(function () {
define(['../app/routing'], function (routing) {
    return {
        Router: routing,
        LOG_TRANSITIONS: true
    };
});
}());

, routing.js as:

(function (root) {
    define(["ember"], function (Ember) {
        var router = Ember.Router.extend({
            todosRoute: Ember.Route.extend({
                viewName: 'todos',
                model: function(){
                    return this.todos.find('todos');
                }
            })
        });
        return router;
    });
}(this));

and main.js:

require(['app', 'ember'], function(app, Ember){
            var app_name = config.app_name || "app";
            root[app_name] = app = Ember.Application.create(app);

The problem I have is that no matter how I define my routes, I cannot get them to work, emberJs also reports, that such routes do not exist.

How can I define routes and pass them to Application.create(obj) as argument object? If possible, I would still like to keep them in separate file. Please note, that routing.js should be executed before main.js, therefore App object is not available like it is suggested in tutorials

I'm not sure where your examples are coming from, but the route classes don't belong in the router. http://emberjs.com/guides/routing/defining-your-routes/ — Kingpin2k, Jun 10 '14 at 18:43

score 4 · Answer 1 · edited May 23 '17 at 12:34

js/app.js

App = Ember.Application.create();

App.Router.map(function() {

  this.route('index', {
    path: '/'
  });

  this.route('about');

});

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

I know you'll want to pull these all out into different files, but have you been able to make things work in a simple environment?

As far as the Require JS stuff... I don't know much about that - but there seems to be a thread here: Ember.js and RequireJS that gets to the bottom of it.

Saba · Answer 2 · 2015-05-23T19:37:01.227

Make your router.js file look like this:

(function (W) {
'use strict';

define([
    'ember'
], function (Ember) {
    var Router;
    Router = Ember.Router.extend();

    Router.map(function () {
        var _this = this;

        _this.route('index', {path: '/'});
        _this.route('todos', {path : '/todos/'});
    });
    return Router;
});

})(window);

For individual route, add a new file.

(function (W) {
'use strict';

define([
    'ember',
    'models/todosModel'
], function (Ember, TodosModel) {
    var TodosRoute;

    TodosRoute = Ember.Route.extend({
        model: function () {
                       return TodosModel;
        }
    });

    return TodosRoute;
});

})(window);

Add the individual routes to object returned by your app.js.

EmberJs routing

2 Answers2