Where to put the global state in Ember.js?

Question

In my Ember.js application, users can have multiple projects. Since only one project can be viewed at a time, the active project is selected through the navigation panel. This is basically a global state (which is also reflected in the URL /projects/xyz ).

Since several components depend on the project choice, where do I put this information? And in what form can I save it (instance or id)?

---

About my status quo: I have a route that intercepts the setupController call for /projects/:project_id and uses App.set("projectId", model) to place the instance in the global namespace. That seems bad, doesn't it?

Answer 1

Whenever you have a global state that is reflected in a URL, you can use an ember router to manage that state.

For example, let's say you have a task resource embedded in a project, for example:

 App.Router.map(function() { this.resource('project', { path: '/projects/:project_id' }, function() { this.route('edit'); this.resource('tasks', function() { this.route('new'); }); }); }); 

Ember will use the project_id project URL segment to find your model and set it as the contents of ProjectController. To access the currently selected project from another controller, declare the dependency using the needs array and access it using the controllers property.

 App.TasksController = Ember.ArrayController.extend({ needs: ['project'] }); // tasks/index.hbs Project name: {{controllers.project.name}} 

See controllers-needs-explained