【问题标题】:How to make linkTo dynamic in ember?如何在ember中使linkTo动态化?
【发布时间】:2013-02-19 09:57:03
【问题描述】:
<script type="text/x-handlebars" data-template-name="patient">
    <ul class="nav">
    {{#each menuItem in menuItems}}
        <li>{{#linkTo "dashboard.summary" menuItem}}{{menuItem.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    {{outlet}}
</script>

在上面的代码中,如何使linkTo 成为动态链接而不是硬编码的“dashboard.summary”?例如,"dashboard."+menuItem.name。

【问题讨论】:

  • 我不认为这是可能的,但无论如何你不应该需要为每个模型单独的路线。您能否更详细地解释您要完成的工作?
  • 我有一个从数据库获取的菜单项列表,对应于我想要不同路线的每个菜单项。菜单项是药物订单 vsio 说明演示访问的摘要结果。在点击它们中的每一个时,我会被带到不同的屏幕

标签: ember.js ember-data


【解决方案1】:

您可以注册一个简单的 Handlebars 帮助器来包装 linkTo 帮助器。

var linkTo = Ember.Handlebars.helpers.linkTo;
Ember.Handlebars.registerHelper('myLinkTo', function(name, suffixPath) {
  var suffix = Ember.Handlebars.get(this, suffixPath);    
  arguments = [].slice.call(arguments, 2);
  arguments.unshift(name + '.' + suffix);

  return linkTo.apply(this, arguments);
});

然后在你的模板中你可以写:

{{#each menuItems}}
    <li>{{#myLinkTo "dashboard" name this}}{{name}}{{/myLinkTo}}</li>
{{/each}}

帮助器将解析第二个参数并将其附加到第一个参数,前面有一个点。

编辑:现在无需自定义助手即可实现此行为。有关此问题的当代解决方案,请参阅c4p's answer。上述解决方案最后使用 Ember 1.0.0-rc.1 进行了测试。

【讨论】:

  • 嗨..它的工作..@ahmacleod非常感谢您的帮助... :)
  • 嗨,我试过了,但出现异常:Uncaught [object Object] at handlebars-1.0.0-rc.4.js:707 您使用的是哪个把手和 ember 版本?
  • slice.call 中的参数来自哪里?你如何将其转换为 ember-cli / es6?
  • arguments 只是调用匿名内部函数时 JS 提供的标准参数数组。你免费得到那个。按照 Ember 指南的 writing helpers 部分将其移植到 ember-cli 应该很简单。
【解决方案2】:

在当前的 Ember(截至本文的 1.10)中,帮助器现在接受引用的参数或将在当前上下文中作为属性查找的参数。我相信这在 Ember 1.2 (change log) 中有所改变。

如果引用,参数将被用作字符串:

{{#link-to 'post'}}Posts{{/link-to}}

如果没有引用,参数将在当前上下文中查找:

{{#link-to routeName}}Go To '{{routeName}}'{{/link-to}}

这将是一个指向routeName 属性当前设置的任何内容的链接。这可以动态更新。

下面是一个 JSBin 示例,展示了这一点:http://emberjs.jsbin.com/nelafep/1/edit?html,css,js,output

【讨论】:

  • 你知道动态传递参数的方法吗?
  • 这是最新的答案。
  • 注意(此时是 Ember 2.16)这很好:{{#link-to (concat baseRoute ".edit") model}}Edit{{/link-to}}
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-07
  • 1970-01-01
  • 1970-01-01
  • 2013-02-20
  • 2013-10-04
相关资源
最近更新 更多