Question

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

例如，给定此代码：

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>

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

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}}助手？在此代码段中：

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

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

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

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

Answer 1

使用LinkTo帮助程序无法做到这一点，您需要使用bindAttr

将链接的 href 绑定到navItemPath

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

确保逻辑rend navItemPath的值考虑location API

如何将模型路由名称项传递给ember.js模板中的linkTo

1 个答案: