Ember.js After refresh page data disappear

Question

Ive got little basic problem with ember.

Here is app: http://emberjs.jsbin.com/qivamuzu/5 (click test - working like a charm, because model is in memory - loaded in index page)

But when you try page #test directly http://emberjs.jsbin.com/qivamuzu/5#/test all the data disappear (and that's bad - does not fired index route and load model). I follow this question Why isn't my ember.js route model being called? but doesn't help me.

I need to use template with model in other templates - I use {{render index}} but I'm not sure what to use and how. Please help me I am stuck.

Sarus · Accepted Answer · 2014-02-27T12:35:09.910

1

I'm a little unclear on exactly what you're trying to do.

If you're just trying to use the same model data with a different route (and template) then you can explicitly set the model data to be the same in the route definition:

App = Ember.Application.create();

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

var myModelData = ['red', 'yellow', 'blue'];

App.IndexRoute = Ember.Route.extend({
  model : function(){
    return myModelData;
  }  
});

App.TestRoute = Ember.Route.extend({
  model : function(){
    return myModelData;
  }   
});

Here's a working JSBin example:

http://emberjs.jsbin.com/qivamuzu/8/edit

EDIT: Additional Information That May Help

Okay, one more stab at it =) When you navigate directly to the test page there is no data because the TestRoute is using the model data from the IndexRoute which hasn't been loaded yet. What you can do is force the creation of the IndexController and model by initializing it from the ApplicationRoute which will always be invoked when you first go to any route in your application.

First you have to generate the controller since it doesn't exist yet.

this.generateController('index');

Then you can get the controller and set its model data:

this.controllerFor('index').set('model', ['red','green','blue']);

Here's a working fiddle and I actually tested it this time to make sure it works when you go straight to #/test. I removed the extra routes and things that aren't actually needed from my previous example.

http://emberjs.jsbin.com/qivamuzu/11#/test

edited Feb 27 '14 at 12:35

answered Feb 26 '14 at 04:55

Sarus

3,303
1
23
27

Thanks this is what I exactly want, but I think that ember has another way to do this, but this is enought. – petkopalko Feb 27 '14 at 09:13
I added another example that uses the {{render}} helper. I'm not sure if it's what you were after as it seems like an odd use case to me but maybe it will help! – Sarus Feb 27 '14 at 10:01
Hi this is exactly what I want, I use render becouse I want to render template with model in more templates, like a component with json data from server. Your second example doing the same problem as my example - when you try test link http://emberjs.jsbin.com/qivamuzu/9#/test directly it does not render model. – petkopalko Feb 27 '14 at 10:26
Hah, you're right. When you go straight to test the index route hasn't been loaded yet so there is no model data for the test route to display. I updated the answer once again with a solution that I think will work. Let me know if it does what you need. – Sarus Feb 27 '14 at 12:36
And last thing - How I achieve DRY code with `this.controllerFor('index').set('model', ['red','green','blue']);` how to change `['red','green','blue']` to load model from test route, I hope you understand what I want :) – petkopalko Mar 05 '14 at 20:20

Ember.js After refresh page data disappear

1 Answers1