如何在 ember 助手(linkTo 或 partial)中使用字符串变量? [英] How to use string variables in ember helpers (linkTo or partial)?

问题描述

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

I need to setup array of menu links in the router and then render them in template using #each. But seems like #linkTo helper didn't recognize variables. How can i solve this?

路由器:

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'} ])
  }
})

应用程序模板中的链接呈现:

Links rendering in applications template:

{{#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)

推荐答案

如果你还在为 ken 的选择而苦恼，你可能想尝试这样的事情:

If you are still struggling with ken's option, you may want to try something like this:

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

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

And then you will need a goToLink function to handle the action. You can put it on your Collection, but if you don't, it is supposed to bubble up to your route handler, which, in theory, should make things really easy:

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

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

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

You can read more about Actions, here: http://emberjs.com/guides/templates/actions/

我使用最新最好的 Ember 为您制作了一个小提琴.

I have put together a fiddle for you, using the latest and greatest Ember.

由于我发现的一些技术限制，我对上述建议略有改动.

I made a slight variation on my suggestion above, due to some technical limitations I discovered.

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

Specifically, the Route only seems to be able to handle actions for controllers that were created internally by the Route. This is a problem for our navigation menu, since you are changing routes, while it's still on the screen.

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

If I switched to using a Handlebars "render" helper to render the menu, no Router seems to be willing to handle the action. However, the current router seems to always be hooked up in the bubble chain for a "send" on the controller. So, I just have the controller send an event on up the chain to the Router, and we get our routing bliss.

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

You can find the fiddle, here: http://jsfiddle.net/Malkyne/fh3qK/

这是同一个 fiddle 的另一个版本，只有(奇怪的未记录)ApplicationRoute 用于直接处理操作，而无需控制器进行任何中继:http://jsfiddle.net/Malkyne/ydTWZ/

Here is another version of the same fiddle, only with the (weirdly undocumented) ApplicationRoute being used to directly handle the action, without the controller having to do any relaying: http://jsfiddle.net/Malkyne/ydTWZ/

这篇关于如何在 ember 助手(linkTo 或 partial)中使用字符串变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！