What is the the point of the route url segments?


I am relatively new to Ember, but have done a few tasks with it enough to gather some questions. One thing I am slightly at ends about is the url segments/router stuff. I can’t understand how you can define just one state for your page at any one time. Usually you might have multiple things going on on the page?

If I have two lists both with separate paginators and I wanted my route to take a parameter to represent the page number, say, how can one url segment represent two completely independent lists, one not being a child of the other? Or how could it be done so that it makes sense (yes you could have a parent route and a child to represent two lists but this is messy).

Also what if I have two separate systems on the page that need their own templates but, one is not actually a child of the other in any sense of the word.

Query params are one way to do what you’re asking. Only one leaf route can be active in an ember application - it’s possible to imagine a router where this constraint was not present but I’m not aware of any projects that tackle it.

since you mention this, are you using this.store.query() for this? How do you update a list onscreen that is using this.store.query(). The template does not get updated and I am struggling to track down how to update the template.

I realise ember doesn’t know if the filtered view should show the new object or not. Do you create a separate array of newly added objects and display them underneath?

generally I use queryParams in conjunction with the refreshModel flag

Yes, I was wondering though if we you have a list:

{{#each model as |job|}}

  • Id: {{job.id}} Reference: {{job.reference_caption}} Caption: {{job.caption}}
  • {{/each}}

    When I create a create:

    var record = this.get('store').createRecord('job', data); record.save();

    If my route uses this.store.query to get the data then the list above does not reflect the new record. If my route uses findAll it does.

    I was wondering is there a work around for this, to force the list to reflect what has been added to the store (it is there in the store because it shows in Ember inspector). It just doesn’t update the template of the route that has the list.

    No, queries are completely opaque to ember data. If you create new records you will have to manually refresh the route

    How do you manually refresh the route from a child component that comes from a child route? Time and time again it feels like Ember just makes the simplest of things difficult.

    Well calling refresh() did not work, though I called it on a child route (that is returning the parent model). I have tried transitioning to the right route as well to try and entice a call back to the server, but it doesn’t update still, in fact the model is not called…so that’s caching stopping it from updating.

    I’m not sure how to get to this parent route and refresh it? Any ideas? Why the hell can’t Ember data just print on the screen whats in it’s cache.

    You call Route#refresh to refresh a route. The simple things in ember are quite simple, it’s not very difficult. Use action bubbling to send actions to the route you want to call methods on.

    This is not caching. It sounds like you called refresh on the wrong route.

    Ember can do that just fine. That’s not what you told ember to do. Use computed properties and one of the live updating store methods to do that. Store.query does not return a live updating array, because that would be impossible - how would ember know what should be in the array? Many other store methods do update live.

    “> Many other store methods do update live.” Like which ones? There is findAll, that’s it. Filter() and find() are now deprecated so I’m reluctant to use them. But findAll doesn’t appear to let you send parameters to the server to tell it to do filtering.

    I finally managed to get the jobs route calling refresh() but in a typical act of defiance by Ember I’m getting an error: ember.debug.js:26567 Uncaught TypeError: Cannot read property 'router' of undefined_emberRuntimeSystemObject.default.extend.refresh @ ember.debug.js:26567tryme @ jobs.js:18triggerEvent @ ember.debug.js:28580trigger @ ember.debug.js:53473Router.trigger @ ember.debug.js:52232_emberRuntimeSystemObject.default.extend.send @ ember.debug.js:28045_emberMetalMixin.Mixin.create.send @ ember.debug.js:32723userDidSubmitCastingForm @ create-a-job.js:8Backburner.join @ ember.debug.js:723run.join @ ember.debug.js:21181closureAction @ ember.debug.js:29521saveJob @ tas-create-casting.js:33_emberViewsViewsView.default.extend.send @ ember.debug.js:41747superWrapper @ ember.debug.js:23110runRegisteredAction @ ember.debug.js:29633Backburner.run @ ember.debug.js:678run @ ember.debug.js:21139actions.push.handler @ ember.debug.js:29627(anonymous function) @ ember.debug.js:44705jQuery.event.dispatch @ jquery.js:4737elemData.handle @ jquery.js:4549

    It’s crashing inside refresh.ARggggh

    Hi, finally got it updating thanks for your suggestions. refresh was crashing because I did this.get(‘refresh’)() instead of this.refresh() in the router action.

    1 Like