如何在成员帮助程序(linkTo或partial)中使用字符串变量

Question

我需要在路由器中设置菜单链接数组，然后使用#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)

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

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

更新

我为你准备了一把小提琴，用的是最新最棒的Ember。

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

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

如果我切换到使用Handlebars"render"助手来渲染菜单，那么似乎没有路由器愿意处理该操作然而，当前路由器似乎总是连接在气泡链中，以便在控制器上进行"发送"。所以，我只需要让控制器在链路上向路由器发送一个事件，我们就可以享受路由的快乐。

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

更新2

这是同一个fiddle的另一个版本，只是（奇怪的是没有记录）ApplicationRoute被用来直接处理操作，而控制器不必进行任何中继：http://jsfiddle.net/Malkyne/ydTWZ/

Answer 2

您不能在linkTo helper中使用变量，您需要在锚点标签上使用bindAttr而不是

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

Answer 3

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

ENV.HELPER_PARAM_LOOKUPS = true

在加载Ember.js之前。有关更多详细信息，请参阅以下拉取请求：linkTo中的无引号路由参数执行查找

以下是jsFiddle中的完整工作示例：

示例：在Ember 中的#linkTo助手中使用变量

Answer 4

这个线程不是最新的，我不知道Ember的最新版本是否为这个问题提供了不同的解决方案，但在Ember 1.11版本上，它运行良好。

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

它的工作原理与助手类似（是的，它将根据您当前的路由为您切换active类），并允许您传递动态参数。模拟作者的情况，我们会有这样的东西：

component.js

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

组件.hbs

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

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