How to get current URL in a template that's inside a component?

1

I’ve got a modal component and in one of templates that is displayed inside this component I need to display the current URL as a value of text input element.

I’ve created currentURL helper that simply returns window.location.href and it works fine, but I don’t know how to use this helper to set value attribute of text input element, because it looks like bind-attr expects a property on the current context and not a helper.

I probably could set it as a property on controller/view, but I’m not sure how to do it using Route#render method. Currently I’m rendering modals like this:

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    openModal: function (template) {
      return this.render(template, {
        outlet: 'modal',
        into: 'application'
      });
    }

This action is then called in other route’s renderTemplate method. Templates look like this:

{{#modal-dialog}}
  <p>some html code</p>
{{/modal-dialog}}

It seems like it should be a trivial thing to do, but I can’t figure it out.

2

Got it… I created a view for this specific template with currentURL property and I pass this property to the component in the template - {{#modal-dialog currentURL=view.currentURL}}.

3

On the application controller, you have access to currentPath.

Here is an example of how this might work: Ember Latest - JSFiddle - Code Playground

4

Thanks! I actually need the whole URL to allow users to easily share it, but this way I could add currentURL property on application controller that would observe currentPath instead of creating a separate view just for this single property.

5

I would have a URL property on a controller set inline or on the route and bind the textbox value to it.

6

I should have read your question closer. Modified: Ember Latest - JSFiddle - Code Playground

7

Thanks! Is there any difference between Ember.observer + Ember.run.next and something like this:

currentUrl: function () { 
  return window.location.href; 
}.property('currentPath')

?

8

A computed property will work in this case since they’re async, where observers are immediate (mentioned @ emberconf that it’s a possible bug in Ember that has lingered around). So that’s why it’s needed to wrap in an Ember.run.next within an observer because the change to window.location.href actually happens later on in routerTransitions run loop queue.

I could be wrong, but I believe that’s the reason.

9

Thanks, I had no idea about this difference.

10

I finally had some time to get back to this app and, unfortunately, observing currentPath doesn’t work correctly.

I’ve got a route named room where the path looks like /rooms/:room_id and whatever room_id is, currentPath always returns just room, so the currentUrl is not updated when user switches between rooms…

It also looks like in setupController function, URL is not modified yet, so I can’t set currentURL property there on controller as well.

Here’s an updated example from @jasonmit - Ember Latest - JSFiddle - Code Playground - switching between room routes doesn’t change URL.

11

@szimek here you go Ember Latest - JSFiddle - Code Playground

12

Thanks! Is target.url documented somewhere?

I’ve also found another approach (Get current URL in emberjs - #5 by seif) that uses afterModel and sets currentUrl once transition promise is resolved.

13

Target in this context is the router and it has a url property that it updates after each transition. It is documented here EmberRouter - 4.6 - Ember API Documentation