更新

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

您可以在此处详细了解操作：http://emberjs.com/guides/templates/actions/

更新

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

由于我发现的一些技术限制，我对上述建议略有不同。

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

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

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

更新2

这是同一个小提琴的另一个版本，只有（奇怪的未记录的） ApplicationRoute 用于直接处理动作，而控制器不必进行任何中继：http://jsfiddle.net/Malkyne/ydTWZ/ < / p>

Answer 2

你不能在linkTo帮助器中使用变量，你需要在锚标签上使用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之前

。有关详细信息，请参阅以下提取请求：Quoteless route param in linkTo performs lookup

这是一个完整的工作示例，作为jsFiddle：

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

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

可以找到更多详细信息，https://postimg.org/image/5fwxfqjqf/。

如何在ember helpers（linkTo或partial）中使用字符串变量？

4 个答案:

更新

更新2