ember.js – 如何在ember helpers中使用字符串变量(linkTo或partial)?

前端之家收集整理的这篇文章主要介绍了ember.js – 如何在ember helpers中使用字符串变量(linkTo或partial)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在路由器中设置菜单链接数组,然后使用#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)

解决方法

如果你还在努力克服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/

猜你在找的JavaScript相关文章