如何在Ember.js的模板中将模型路线名称项目传递给linkTo [英] How to pass Model route name item to linkTo in template in ember.js

问题描述

如何将路由名称动态传递给{{linkTo}}？

How do I pass a route name to a {{linkTo}} dynamically?

例如，给定此代码：

App.Router.map(function() {
 this.resource('anon', {path: '/main'},
 function() {
   this.route('home', {path:'/home'});
   this.route('about', { path: '/about' });
   this.route('contact', { path: '/contact' });
 });
});

App.NavController = Ember.ArrayController.extend({
  selectedNav:'',
  setNav:function(value){
  var nav = App.Nav.find(value);
  var items = nav.get('navItems');
  this.set('content', items);    
  }
});

这些模板：

<script type="text/x-handlebars" data-template-name="nav">
  <ul class="nav">
    {{#each in controller}}
      {{ partial "basicNav"}}
    {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="_basicNav">
  <li>{{#linkTo navItemPath}}{{navItemName}}{{/linkTo}}</li>
</script>

这些具有以下夹具数据的型号：

and these models with the following fixture data:

App.Nav = DS.Model.extend({
  navItems:DS.hasMany('App.NavItem'),
  name:DS.attr('string')
});

App.NavItem = DS.Model.extend({
  nav:DS.belongsTo('App.Nav'),
  navItemName:DS.attr('string'),
  navItemPath:DS.attr('string')
});

App.Nav.FIXTURES = [
 {
  id: 10,
  name: 'Anon',
  navItems: [100,200,300]
 }
];

App.NavItem.FIXTURES = [
{
  id:100,
  nav:10,
  navItemName:'Home',
  navItemPath:'anon.home'
},
{
  id:200,
  nav:10,
  navItemName:'Contact',
  navItemPath:'anon.contact'
},
{
  id:300,
  nav:10,
  navItemName:'About',
  navItemPath:'anon.about'
}
];

如何将navItemPath传递给{{linkTo}}助手？在这段代码片段中：

How do I pass navItemPath to the {{linkTo}} helper? In this code snippet:

{{#linkTo navItemPath}}{{navItemName}}{{/linkTo}}

ember抱怨说它找不到navItemPath路由，就像它正在寻找它。如果我用一个有效的文字路线替换它，如：

ember complains that it can't find the "navItemPath" route, like it's looking for it literally. If I replace that with a valid literal route like:

{{#linkTo 'anon.home'}}{{navItemName}}{{/linkTo}}

ember将按预期将linkTo与navItemName一起呈现，所以我知道控制器正在传递正确的数据，但当然所有的路由都是愚蠢的。我错过了一些明显的东西吗？

ember will render the linkTo with the navItemName as expected, so I know the controller is passing it the right data, but of course all the routes are goofy. Am I missing something obvious?

推荐答案

你不能用LinkTo帮手来做，你需要绑定 链接到 navItemPath 使用 bindAttr

You can't do that with LinkTo helper, you need to bind the href of your link to navItemPath using bindAttr

<a {{bindAttr href="navItemPath"}}>{{navItemName}}</a>

确保逻辑rending navItemPath的值考虑到位置 API

Make sure the the logic rending navItemPath's value takes into account the location API

这篇关于如何在Ember.js的模板中将模型路线名称项目传递给linkTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！