【问题标题】：How to use string variables in ember helpers (linkTo or partial)?如何在 ember 助手（linkTo 或部分）中使用字符串变量？
【发布时间】：2013-02-11 12:40:31
【问题描述】：

我需要在路由器中设置菜单链接数组，然后使用#each 在模板中呈现它们。但似乎#linkTo 助手无法识别变量。我该如何解决这个问题？

路由器：

Lite.DashboardRoute = Em.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('application').set('mainControls', [ {path: 'widgets.new', name: 'Add', classes: 'btn btn-success icon-ok-sign'} ])
  }
})

应用模板中的链接渲染：

{{#each link in mainControls}}
  {{#linkTo link.route class=link.classes}} {{link.name}} {{/linkTo}}
{{/each}}

错误信息：

ember.debug.js:51 Error: assertion failed: The route link.route was not found

Ember 版本：

// Version: v1.0.0-pre.4
// Last commit: 855db1a (2013-01-17 23:06:53 -0800)

【问题讨论】：

似乎linkTo 助手将第一个参数识别为逐字路由名称，而不是变量名称..
是的，但是我如何呈现具有不同 url 的链接列表？

标签： ember.js

【解决方案1】：

如果您仍在为 ken 的选择而苦恼，您可能想尝试以下方法：

{{#each link in mainControls}}
    <a {{action "goToLink" link}} {{bindAttr class="link.classes"}}>
        {{link.name}}
    </a>
{{/each}}

然后您将需要一个 goToLink 函数来处理该操作。你可以把它放在你的 Collection 中，但如果你不这样做，它应该会冒泡到你的路由处理程序中，从理论上讲，这应该会让事情变得非常简单：

App.MyRoute = Ember.Route.extend({
    // ... stuff ...

    actions: {
            goToLink: function(item) {
                this.transitionTo(item.route);
            }
    }
});

您可以在此处阅读有关操作的更多信息：http://emberjs.com/guides/templates/actions/

更新

我用最新最好的 Ember 为你准备了一个小提琴。

由于我发现了一些技术限制，我对上面的建议做了些许改动。

具体来说，Route 似乎只能处理由 Route 内部创建的控制器的操作。这是我们的导航菜单的问题，因为您正在更改路线，而路线仍在屏幕上。

如果我切换到使用 Handlebars“渲染”助手来渲染菜单，似乎没有路由器愿意处理该操作。然而，当前路由器似乎总是连接在气泡链中，以便在控制器上“发送”。所以，我只是让控制器在链上向路由器发送一个事件，我们就得到了我们的路由幸福。

你可以在这里找到小提琴：http://jsfiddle.net/Malkyne/fh3qK/

更新 2

这是同一个小提琴的另一个版本，只是使用（奇怪的未记录的）ApplicationRoute 来直接处理操作，而无需控制器进行任何中继：http://jsfiddle.net/Malkyne/ydTWZ/

【讨论】：

你做了一个令人印象深刻的工作，只是回答某人的问题。谢谢=）它是一个很好的解决方案，至少它比我现在使用的那个更好（我渲染每个可能的链接，其中一个部分包含在#if 块中的硬编码路径）。无论如何，我将在 ember.js github 上添加功能请求，以向 ember 助手添加对变量名的支持。但在那之前我会使用你的解决方案。再次感谢 =)
你能在当前项目中添加一个active 类吗？
Willem，事实证明 ApplicationController 上有一个非常方便（可能未记录）的属性，恰当地称为 currentPath。这包含您当前的路线路径。您可以在其中创建一个带有 needs: ['application'] 的 MenuItemController，并在其中使用您想要引用 controllers.application.currentPath 属性的任何逻辑（例如将其与您的路线值进行比较）。我为您制作了上述小提琴的模型，因此您可以看到它的实际效果：jsfiddle.net/Malkyne/fRsAv
@Tess，谢谢你的示例代码，是否也可以使用dynamic-segment 去路由？
更新 7-2014：不推荐使用事件。在 Route 中使用操作。

【解决方案2】：

你不能在linkTo helper中使用变量，你需要在锚标签上使用bindAttr

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>

【讨论】：

我试过了。但是此链接不能用作 ember 链接。它与常规链接一样工作。
ember 链接是什么意思，linkTo 是一个支持定位 api 的常规锚标签。只要你正确设置了link.route，链接应该可以正常工作。
使用以下设置尝试此解决方案：App.Router.reopen({ location: 'history', rootURL: '/' })
我还发现 App.Router.reopen({ location: 'history', rootURL: '/' }) 选项不起作用然后您在浏览器中刷新页面，所以我返回默认哈希值。

【解决方案3】：

从 Ember.js RC6 开始，可以将 Ember 配置为将路由作为属性来查找，而不是将它们解释为硬编码值。从 RC6.1 开始，这需要定义一个环境变量：

ENV.HELPER_PARAM_LOOKUPS = true

在 Ember.js 加载之前。有关更多详细信息，请参阅以下拉取请求：Quoteless route param in linkTo performs lookup

这是一个完整的 jsFiddle 示例：

Example: Using a variable in a #linkTo helper in Ember

【讨论】：

【解决方案4】：

这个帖子不是很新，我不知道最新版本的 Ember 是否为这个问题提供了不同的解决方案，但在 Ember 版本 1.11 上它可以正常工作。

解决方案是link-to 的内联版本。

它就像助手一样工作（是的，它会根据您当前的路线为您切换 active 类）并允许您传递动态参数。模拟作者的情况，我们会有这样的：

component.js

mainControls: [
  { path: 'widgets.new' },
  { name: 'Add' },
  { classes: 'btn btn-success icon-ok-sign' }
]

component.hbs

{{#each link in mainControls}}
  {{link-to link.name link.route class=link.classes}}
{{/each}}

更多关于这种方法的细节可以在here找到。

【讨论】：