2013-02-08 6 views
17

Obecnie zacząłem uczyć się używać Ember.js do tworzenia aplikacji internetowych. Obecnie jest coś podstawowego, czego jeszcze nie udało mi się osiągnąć. Link do zewnętrznego adresu URL, np. Www.google.com lub cokolwiek innego. To jest to, co mam:Jak utworzyć link do zewnętrznego adresu URL za pomocą LinkTo z programem HandelBars

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" 
    }); 

}); 

});

Gdy związek sprawia, że ​​działa, ale to idzie na ten adres: E: /EMBERJS/index.html#/www.google.com

Wszelkie wskazówki będą bardzo mile widziane. Nie mogę uwierzyć, że nie wymyśliłem tego na własną rękę, ale mała pomoc z zewnątrz nie zaszkodzi.

Pozdrawiam,

Ox

+1

Czy istnieje szczególny powód, dla którego potrzebujesz szablonu 'linkTo'? Dlaczego po prostu nie użyjesz znacznika zakotwiczenia w czystym HTML? – Deif

Odpowiedz

35

Nie chce być pomocą linkTo pomocnika do tego. Pomocnik linkTo służy do przejścia do innych stanów w aplikacji Ember.JS, podczas gdy próbujesz odciągnąć ludzi od aplikacji.

Istnieją dwie metody można użyć:

  1. To będzie powiązać targetUrl do kotwicy, ale nie będzie aktualizować jeśli URL zostanie zmieniony.

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

  2. Kolejne podejście będzie wiązać się z kotwicy i będzie aktualizować tę kotwicę odpowiednio jeśli zaktualizować właściwość targetUrl na obiekcie:

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

Oto JSFiddle dla ciebie: http://jsfiddle.net/zscff/

+1

Zaktualizowałem JSFiddle dla ciebie, abyś mógł zrozumieć różnicę, którą czyni "niezwiązane": http: // jsfiddle.net/zscff/1/Zmieniamy właściwość 'targetUrl' po 2,5 sekundach, zobaczysz, że drugi przykład aktualizuje się zgodnie z oczekiwaniami, ale pierwszy nie. Oboje używają tej samej właściwości, ale ponieważ określiliśmy pierwszą właściwość jako "niezwiązaną", Ember nie wie, jak ją zaktualizować w DOM. – Wildhoney

+0

Doceniam to dzięki, pozwól mi zajrzeć do tego. – Oxnigarth

+1

bindAttr jest teraz przestarzałe na korzyść bind-attr –

0

Jak zostało powiedziane, że d nie trzeba używać pomocnika link-to. Wystarczy użyć prostego znacznika zakotwiczenia <a> </a>.

Po prostu miałem ten sam problem. Aby to naprawić, wystarczy zachować ostrożność przy pomocy znacznika zakotwiczenia.
E.g. jeśli wpiszesz odnośnik jak to <a href='www.example.com'> example </a>, Ember wygeneruje poniższy link
localhost: 4200/www.example.com

Ale jeśli dodać http, do atrybutu href wszystko jest w porządku.
<a href='http://www.example.com'> example </a>.
Dane wyjściowe to www.example.com

Mam nadzieję, że to pomaga.

Powiązane problemy