Open a new window on click with ember

Question

How can I open a new window when the user clicks on a link?

I have tried adding target="_blank" and bindAttr but it doesn't work.

The code that doesn't work:

<a target="_blank" {{action goToSettings href=true}}>App Settings</a>

or

<a {{bindAttr target="_blank"}} {{action goToSettings href=true}}>App Settings</a>

And this is the html output from the first example:

<a target="_blank" href="#/settings" data-ember-action="5">App Settings</a>

You're actually calling a function in your application. What does `goToSettings` do? The way this is set up it will never open a new window unless you explicitly write the code in that function. If you want this to be a link, set the an URL (a route?) to the `href` property — MilkyWayJoe, Dec 22 '12 at 02:30
Yeah exactly this function is in my router: goToSettings: Ember.Route.transitionTo('root.settings'), — George Eracleous, Dec 22 '12 at 12:58

score 8 · Accepted Answer · answered Dec 22 '12 at 03:13

8

You have two choices:

send an action, and in the javascript that handles the action, call window.open(...) to open a new window to a particular URL
Don't use an action and instead make it a static link or if you need to dynamically vary the target URL, use <a target="_blank" {{bindAttr href="yourBoundPropForTheUrl"}}>Click here</a>

answered Dec 22 '12 at 03:13

Luke Melia

2

The problem with the first approach is that I only want to open a new window in a specific case. For all other actions I'd like it to be in the same window. I am not sure I understand the second option. what would be the yourBoundPropForTheUrl"? – George Eracleous Dec 22 '12 at 13:01
In the first approach, you can still exercise some conditional logic to decide whether to open a new window or transition to another state. For the second option, the idea is that `yourBoundPropForTheUrl` would be a property that resolves to the URL that you want to open. – Luke Melia Dec 24 '12 at 05:52
1

If you are not yet on a version of Ember with support for this in LinkView, you may also be pondering how to generate a URL valid for Ember's route logic. As _also_ provided by @LukeMelia on his answer to [this question](http://stackoverflow.com/questions/21513081/how-to-generate-url-for-a-route-in-ember-js), you can access the router to generate the URL based on parameters similar to what you would use with `transitionToRoute`. Here's an example from within a controller action: `this.get('target').router.generate('item', item.topic_id, item.id);` – bargar Nov 04 '14 at 04:39

score 3 · Answer 2 · answered Nov 04 '14 at 04:30

3

This has been added to LinkView, and therefore is now supported directly in {{link-to}}.

answered Nov 04 '14 at 04:30

bargar

2 Answers2