Ember 丢失活动轨迹

Question

您好，我在 ember 中有以下路线：

App.Router.map(function(){

    this.resource('meat', function() {
        this.resource('poultry', function() {
            this.route('chicken');
            this.route('duck');
        });
    });
});

我的模板是这样的：

<script type='text/x-handlebars' id='meat'>       
     <div>{{outlet}}</div>
</script>


<script type='text/x-handlebars' id='poultry'>
       Poultry
       <br/><br/>
          {{#link-to 'poultry.chicken'}}Chicken{{/link-to}}
          {{#link-to 'poultry.duck'}}Duck{{/link-to}}

      <br/><br/>
      <div>
         {{outlet}}
      </div>
</script>

<script type="text/x-handlebars" id="poultry/chicken">
    <h4>Chicken</h4>
</script>

<script type="text/x-handlebars" id="poultry/duck">
    <h4>Duck</h4>
</script>

问题是，当我点击 'Duck' link 时，我失去了 'Poultry' 的活动轨迹。

想不通，路径是对的，但是active类没了

这是一个jsbin：http://emberjs.jsbin.com/yularepare/2/

谢谢！

Answer 1

您评论中的代码与 JSBin 略有不同。您没有包含应用程序模板。在这里：

<script type='text/x-handlebars' data-template-name='application'>
  {{#link-to 'poultry.chicken' }}Poultry{{/link-to}}  

  <br/><br/>
  <div>
    {{outlet}}
  </div>
</script>

您将丢失 active class，因为您直接链接到 'poultry.chicken'，而不是 'poultry'。它不是父路由，而是兄弟路由。如果你想保持活跃class，把你的link-to改成：

{{#link-to 'poultry'}}Poultry{{/link-to}}

它应该可以正常工作。工作 JSBin：http://jsbin.com/fefucalaqi/1/edit

编辑：评论询问如何处理重定向到第一个结果。在这里添加。

App.PoultryIndexRoute = Ember.Route.extend({
  redirect: function() {
    // write some code to get to your first result here.
    this.transitionTo('poultry.chicken');
  }
});

现在您将同时获得：在所有家禽路线上都处于活动状态 class，如果选择了 none，您将显示第一个。

Ember 丢失活动轨迹

Ember losing active trail

javascript

ember.js

ember-router