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ヘルパーではそれを行うことはできません.bindAttrを使用してリンクのhrefをバインドする必要がありますnavItemPath

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

navItemPath の値をレンダリングするロジックがロケーションAPIを考慮していることを確認してください

于 2013-02-04T11:33:16.530 に答える