2013-02-08 25 views
17

Tôi hiện đang bắt đầu tìm hiểu cách sử dụng Ember.js để phát triển ứng dụng web. Hiện tại có điều gì đó khá cơ bản mà tôi chưa thể đạt được. Liên kết đến một url bên ngoài như www.google.com hoặc bất kỳ thứ gì. Đây là những gì tôi có:Cách liên kết đến một URL bên ngoài với LinkTo với 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" 
    }); 

}); 

});

Khi liên kết làm cho nó không làm việc nhưng nó đi đến địa chỉ này: E: /EMBERJS/index.html#/www.google.com

Bất kỳ gợi ý sẽ được đánh giá rất nhiều. Tôi không thể tin rằng tôi đã không tìm ra điều này một mình nhưng một chút giúp đỡ bên ngoài không thể làm tổn thương.

Kính trọng,

Sửu

+1

Có lý do cụ thể nào khiến bạn cần mẫu 'linkTo' không? Tại sao bạn không chỉ sử dụng một thẻ neo trong HTML thuần túy? – Deif

Trả lời

35

Bạn không muốn được sử dụng linkTo helper cho việc này. Trình trợ giúp linkTo được sử dụng để chuyển sang các trạng thái khác trong ứng dụng Ember.JS của bạn, trong khi bạn đang cố gắng di chuyển mọi người khỏi ứng dụng của bạn.

Có hai phương pháp bạn có thể sử dụng:

  1. này sẽ ràng buộc bạn targetUrl để neo của bạn, nhưng nó sẽ không cập nhật nếu URL được thay đổi.

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

  2. Phương pháp tiếp theo sẽ liên kết với các neo, và nó sẽ cập nhật neo mà phù hợp nếu bạn cập nhật targetUrl tài sản trên các đối tượng:

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

Dưới đây là một JSFiddle cho bạn: http://jsfiddle.net/zscff/

+1

Tôi đã cập nhật JSFiddle cho bạn để bạn có thể hiểu được sự khác biệt mà 'unbound' tạo ra: http: // jsfiddle.net/zscff/1/Chúng tôi đang thay đổi thuộc tính 'targetUrl' sau 2,5 giây, bạn sẽ thấy ví dụ thứ hai cập nhật như mong đợi, nhưng ví dụ thứ nhất không. Cả hai đều sử dụng cùng một thuộc tính, nhưng vì chúng tôi đã chỉ định thuộc tính đầu tiên là 'unbound', Ember không biết cách cập nhật nó trong DOM. – Wildhoney

+0

Tôi đánh giá cao nó cảm ơn hãy để tôi nhìn vào nó. – Oxnigarth

+1

bindAttr hiện không được chấp thuận vì lợi ích của liên kết-attr –

0

Như đã nói, bạn d không cần sử dụng liên kết đến số trợ giúp. Bạn chỉ cần sử dụng thẻ neo đơn giản <a> </a>.

Tôi vừa gặp sự cố tương tự. Để khắc phục điều này, bạn chỉ cần cẩn thận với thẻ neo.
Ví dụ: nếu bạn gõ liên kết như thế này <a href='www.example.com'> example </a>, Ember sẽ tạo ra sau liên kết
localhost: 4200/www.example.com

Nhưng nếu bạn thêm http, để href rằng tất cả đều là ok.
<a href='http://www.example.com'> example </a>.
Đầu ra là www.example.com

Hy vọng điều đó sẽ hữu ích.

Các vấn đề liên quan