7

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

灰烬版本：

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

4 回答 4

7

如果您仍在为 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/

于 2013-02-16T11:44:06.453 回答
4

您不能在 linkTo 助手中使用变量，您需要在锚标记上使用 bindAttr

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>
于 2013-02-11T17:50:19.763 回答
1

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

ENV.HELPER_PARAM_LOOKUPS = true

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

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

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

于 2013-08-06T20:25:11.397 回答
0

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

解决方案是link-to.

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

组件.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}}

可以在此处找到有关此方法的更多详细信息。

于 2016-10-06T19:22:32.487 回答