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

**URL:** <https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660>\
**Category:** Uncategorized\
**Created:** [June 14, 2014, 11:36pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660 "2014-06-14T23:36:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [June 14, 2014, 11:36pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/1 "2014-06-14T23:36:51Z")

</div>

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:

```auto
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:

```auto
{{#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.

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [June 14, 2014, 11:47pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/2 "2014-06-14T23:47:06Z")

</div>

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}}`.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [June 15, 2014, 3:46am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/3 "2014-06-15T03:46:16Z")

</div>

> [@szimek](#):
>
> 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.

On the application controller, you have access to `currentPath`.

Here is an example of how this might work: [Ember Latest - JSFiddle - Code Playground](http://jsfiddle.net/NQKvy/1036/)

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [June 15, 2014, 9:38am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/4 "2014-06-15T09:38:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BFalkner](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bfalkner/32/5318_2.png) [@BFalkner](https://discuss.emberjs.com/u/BFalkner)\
**Post date:** [June 15, 2014, 2:26pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/5 "2014-06-15T14:26:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [June 16, 2014, 2:29am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/6 "2014-06-16T02:29:31Z")

</div>

> [@szimek](#):
>
> I actually need the whole URL to allow users to easily share it

I should have read your question closer. Modified: [Ember Latest - JSFiddle - Code Playground](http://jsfiddle.net/NQKvy/1038/)

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [June 24, 2014, 9:33pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/7 "2014-06-24T21:33:28Z")

</div>

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

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

```

?

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [June 25, 2014, 1:02am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/8 "2014-06-25T01:02:18Z")

</div>

> [@szimek](#):
>
> Thanks! Is there any difference between Ember.observer + Ember.run.next and something like this:

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.

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [June 25, 2014, 7:53am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/9 "2014-06-25T07:53:07Z")

</div>

Thanks, I had no idea about this difference.

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [July 18, 2014, 8:39am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/10 "2014-07-18T08:39:06Z")

</div>

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](http://jsfiddle.net/NQKvy/1190/) - switching between room routes doesn’t change URL.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [July 18, 2014, 6:29pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/11 "2014-07-18T18:29:52Z")

</div>

@szimek here you go [Ember Latest - JSFiddle - Code Playground](http://jsfiddle.net/NQKvy/1191/)

---

<div class="post-metadata">

**Author:** ![szimek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/szimek/32/15521_2.png) [@szimek](https://discuss.emberjs.com/u/szimek)\
**Post date:** [July 18, 2014, 8:33pm UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/12 "2014-07-18T20:33:36Z")

</div>

Thanks! Is `target.url` documented somewhere?

I’ve also found another approach ([Get current URL in emberjs - #5 by seif](http://discuss.emberjs.com/t/get-current-url-in-emberjs/3019/5)) that uses `afterModel` and sets `currentUrl` once `transition` promise is resolved.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [July 19, 2014, 2:23am UTC](https://discuss.emberjs.com/t/how-to-get-current-url-in-a-template-thats-inside-a-component/5660/13 "2014-07-19T02:23:17Z")

</div>

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](http://emberjs.com/api/classes/Ember.Router.html#method_url)