如何使用 Link To with HandleBars 链接到外部 URL答案

【问题标题】：How to link to an external URL with LinkTo with HandelBars如何使用 Link To with HandleBars 链接到外部 URL
【发布时间】：2013-01-24 12:19:24
【问题描述】：

我目前开始学习使用 Ember.js 进行 Web 应用程序开发。目前有一些非常基本的东西我还没有实现。链接到外部 URL，例如 www.google.com 或其他。这就是我所拥有的：

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 模板是否有特定原因？为什么不在纯 HTML 中使用锚标记？

标签： frameworks web ember.js handlebars.js

【解决方案1】：

您不想为此使用linkTo 助手。 linkTo 帮助器用于在您的 Ember.JS 应用程序中转换到其他状态，而您正试图将人们从您的应用程序中移开。

您可以使用两种方法：

这会将您的targetUrl 绑定到您的锚点，但如果 URL 发生更改，它将不会更新。

<a target="_blank" href="{{unbound view.targetUrl}}">Google</a>
下一种方法将绑定到锚点，如果您更新对象上的targetUrl 属性，它将相应地更新该锚点：

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

这是给你的 JSFiddle：http://jsfiddle.net/zscff/

【讨论】：

我已经为您更新了 JSFiddle，以便您了解 unbound 的不同之处：jsfiddle.net/zscff/1 我们将在 2.5 秒后更改 targetUrl 属性，您会看到第二个示例按预期更新，但第一个没有。它们都使用相同的属性，但是因为我们将第一个属性指定为 unbound，Ember 不知道如何在 DOM 中更新它。
bindAttr 现在已弃用，取而代之的是 bind-attr

【解决方案2】：

正如所说，您不需要使用 link-to 帮助器。你只需要使用简单的锚标签<a> </a>。

我也遇到了同样的问题。为了解决这个问题，你只需要小心锚标签。
例如。如果你输入这样的链接 <a href='www.example.com'> example </a>，Ember 会生成如下链接
localhost:4200/www.example.com

但是如果你添加 http, 到 href 属性一切都好。
<a href='http://www.example.com'> example </a>.
输出是 www.example.com

希望对你有帮助。

【讨论】：