Access a route model from non nested route with Ember js

1
votes

I am wondering the appropriate way to access a route model from a different non nested route controller. If I have my routes set up like this: (this works however, not sure if its proper)

App.Router.map(function() {
  this.route('admin'); 
  this.route('page1');
}

And the Page 1 route has a model like this:

App.page1Model = {content:'Content of simple model'};

App.Page1Route = Ember.Route.extend({
   model(){
      return App.page1Model;
});

Then the admin controller wants to access the page1 route, I can only do it like this:

App.AdminController = Ember.Controller.extend({
    page1Model:App.page1Model,

    Now do stuff with page1Model.....
});

Ive tried to use Ember.inject.controller() however that only works for me when my routes are nested and I want to access Parent controller from child. Is there a way to use that syntax to get what I want, or is there a better way than what im doing?

Thanks

2
javascriptember.jsember-router

2 Answers

2
votes

There's an inherent problem with what you're asking for: when the user is on the admin page, they're not on the page1 page, so there's no page1 context. Some questions you might want to ask:

  • what happens if the user goes to /admin having never gone to /page1?
  • what happens if the user goes to /page1 then /page2 then /admin?

I can think of two Ember-esque ways of doing what you want:

  1. A Page1ModelService. Here, you create an Ember.Service that holds an instance of Page1Model. You inject the service into route:page1 and route:admin and let them each pull off the instance. Whether they can change which instance of the model is showing is up to you.

  2. Return a Page1Model instance in the model hook for route:application. This route sits above both route:page1 and route:admin, so they can both look up the model as follows:

    // route:application model() { return App.Page1Model.create(); }

    // route:page1 model() { return this.modelFor('application'); }

0
votes

I was able to achieve my goal through using registers and injection. Can someone please take a look and let me know if this is 'proper' through Ember standards or if there is a better way ( @James A. Rosen :) )?

OH! If there is a better way to attach the model to the page1 route, please let me know. This worked though I am not sure if i like the .model after create().

JSBIN: http://jsbin.com/tikezoyube/1/edit?html,js,output

JS of that:

var App = Ember.Application.create();
var page1Model = {title:'Old Title'};
var page1ModelFactory = Ember.Object.extend({
    model : page1Model
});

App.Router.map(function(){
    this.route('page1');
    this.route('admin');
});

App.register('model:page1', page1ModelFactory);
App.inject('controller:admin','page1Model','model:page1');

App.Page1Route = Ember.Route.extend({
    model(){ return page1ModelFactory.create().model; }
});

App.AdminController = Ember.Controller.extend({
    actions:{
        updateTitle:function(){
            console.log(this.get('page1Model').model.title);

            this.get('page1Model').set('model.title','THE NEW TITLE!');

            console.log(this.get('page1Model').model.title);

            this.transitionToRoute('page1');
        }
    }
});

Thanks!