2

如何动态地将路由名称传递给 {{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，所以我知道控制器正在向它传递正确的数据，但当然所有路由都是愚蠢的。我错过了一些明显的东西吗？

4

1 回答 1

1

您不能使用 LinkTo 帮助器执行此操作，您需要将链接的hrefnavItemPath绑定到使用bindAttr

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

确保呈现 navItemPath 值的逻辑考虑了位置API

于 2013-02-04T11:33:16.530 回答