2013-02-08 15 views
17

Attualmente sto iniziando a imparare a usare Ember.js per lo sviluppo di app web. Attualmente c'è qualcosa di abbastanza basilare che non sono ancora stato in grado di raggiungere. Link a un URL esterno come www.google.com o altro. Questo è quello che ho:Come collegarsi a un URL esterno con LinkTo con HandelBar

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

}); 

});

Quando il collegamento rende funziona ma va a questo indirizzo: E: /EMBERJS/index.html#/www.google.com

Eventuali suggerimenti sarebbe molto apprezzato. Non posso credere di non averlo capito da solo, ma un piccolo aiuto esterno non può ferire.

saluti,

Ox

+1

Esiste un motivo specifico per cui è necessario il modello 'linkTo'? Perché non dovresti semplicemente usare un tag di ancoraggio in puro HTML? – Deif

risposta

35

Non si vuole di utilizzare l'helper linkTo per questo. L'helper linkTo viene utilizzato per la transizione ad altri stati all'interno dell'applicazione Ember.JS, mentre si sta tentando di spostare le persone dall'applicazione.

Ci sono due metodi che è possibile utilizzare:

  1. Ciò vincolare il proprio targetUrl per l'ancora, ma non aggiornerà se l'URL viene modificato.

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

  2. L'approccio prossimo si legherà l'ancora, e si aggiornerà che ancora di conseguenza se si aggiorna la proprietà targetUrl sull'oggetto:

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

Ecco un JSFiddle per te: http://jsfiddle.net/zscff/

+1

Ho aggiornato il JSFiddle per te in modo che tu possa capire la differenza che 'unbound' rende: http: // jsfiddle.net/zscff/1/Stiamo cambiando la proprietà 'targetUrl' dopo 2,5 secondi, vedremo che il secondo esempio si aggiorna come previsto, ma il primo no. Entrambi utilizzano la stessa proprietà, ma poiché abbiamo specificato la prima proprietà come 'non associata ', Ember non sa come aggiornarlo nel DOM. – Wildhoney

+0

Lo apprezzo grazie, fammi vedere. – Oxnigarth

+1

bindAttr ora è deprecato in favore di bind-attr –

0

Come si diceva che non è necessario utilizzare l'helper collegamento a. Hai solo bisogno di utilizzare la semplice etichetta di ancoraggio <a> </a>.

Ho appena avuto lo stesso problema. Per risolvere questo problema devi solo fare attenzione con il tag di ancoraggio.
E.g. se si digita link come questo <a href='www.example.com'> example </a>, Ember genererà il seguente link
localhost: 4200/www.example.com

Ma se si aggiunge http, per attributo href tutto è ok.
<a href='http://www.example.com'> example </a>.
uscita è www.example.com

Speranza che aiuta.

Problemi correlati