2013-02-08 8 views
17

現在、Webアプリケーションの開発にEmber.jsを使用する方法を学び始めています。現在、まだ達成できていない非常に基本的なものがあります。 www.google.comなどの外部URLにリンクしてください。これは私が持っているものです。HandelBarsを使用してLinkToで外部URLにリンクする方法

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

}); 

});

リンクがレンダリングそれが作業を行いますが、それは、このアドレスに行く:E:/EMBERJS/index.html#/www.google.com

任意のヒントをいただければ幸いです。私は自分自身でこれを理解していないとは信じられませんが、少し外の助けで傷つけることはできません。

よろしく、あなたがこのためにlinkToヘルパーを使用したくない

+1

'linkTo'テンプレートが必要な特別な理由はありますか?なぜ純粋なHTMLでアンカータグを使用しないのですか? – Deif

答えて

35

牛。 linkToヘルパーはEmber.JSアプリケーション内の他の状態への移行に使用されますが、アプリケーションから人を移動させようとしています。

は、あなたが使用できる2つの方法があります。

  1. これはあなたのtargetUrlあなたのアンカーに結合しますが、URLが変更された場合には更新されません。

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

  2. 次のアプローチは、アンカーに結合し、そしてあなたがオブジェクト上targetUrlプロパティを更新する場合はそれに応じてそのアンカーを更新します:

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

ここですあなたのためのJSFiddle:http://jsfiddle.net/zscff/

+1

私はJSFiddleをあなたのために更新したので、 'unbound'の違いを理解することができます:http:// jsfiddle。net/zscff/1/2.5秒後に 'targetUrl'プロパティを変更すると、2番目の例は期待通りに更新されますが、最初の例は更新されません。彼らはどちらも同じプロパティを使用していますが、最初のプロパティを 'unbound'と指定しているため、EmberはDOMでそれを更新する方法を知らない。 – Wildhoney

+0

私はそれを見ていただきありがとうと感謝します。 – Oxnigarth

+1

bindAttrの代わりにbind-attrが使用されるようになりました –

0

あなたが言ったように使用する必要はありませんlink-toヘルパー。 単純なアンカータグ<a> </a>を使用する必要があります。

私はちょうど同じ問題を抱えていました。これを修正するには、アンカータグに注意する必要があります。
など。あなたはこの <a href='www.example.com'> example </a>のようにリンクを入力すると、エンバーは次のリンク
localhostを生成します:4200/www.example.com

をしかし、あなたはHTTPを追加した場合、すべてがOKである属性てhrefに。
<a href='http://www.example.com'> example </a>
出力はwww.example.com

希望します。

関連する問題