Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to link to an external URL with LinkTo with HandelBars

Tags:

I am currently starting to learn to use Ember.js for web app development. Currently there is something quite basic which I have not yet been able to achieve. Link to an external url like www.google.com or whatever. This is what I have:

HTML

<body>     <script type="text/x-handlebars">     <div>       Hello, <strong>{{firstName}} {{lastName}}</strong>!     </div>        {{#linkTo google}}Google{{/linkTo}}      </script> </body>      $(document).ready(function() {    //alert("HELLO WORLD"); window.App = Ember.Application.create();  App.ApplicationController = Ember.Controller.extend({     firstName: "Trek",     lastName: "Glowacki",     googleURL: "www.google.com/ncr" });  App.Router.map(function() {     this.route("google", {         path: "www.google.com"     });  }); 

});

When the link renders it does work but it goes to this address: E:/EMBERJS/index.html#/www.google.com

Any hints would be greatly appreciated. I can't believe I haven't figured this out on my own but a little outside help can't hurt.

Regards,

Ox

like image 249
Oxnigarth Avatar asked Feb 08 '13 16:02

Oxnigarth


1 Answers

You don't want to be using the linkTo helper for this. The linkTo helper is used for transition to other states within your Ember.JS application, whereas you're attempting to move people away from your application.

There are two methods you can use:

  1. This will bind your targetUrl to your anchor, but it won't update if the URL is changed.

      <a target="_blank" href="{{unbound view.targetUrl}}">Google</a>

  2. The next approach will bind to the anchor, and it will update that anchor accordingly if you update the targetUrl property on the object:

    <a target="_blank" {{bindAttr href="view.targetUrl"}}>Google</a>

Here's a JSFiddle for you: http://jsfiddle.net/zscff/

like image 85
Wildhoney Avatar answered Oct 04 '22 23:10

Wildhoney