Question

如何在导航到不同的子/兄弟页面时保持主导航突出显示？我的应用程序有兄弟页面，共享子导航：

window.App = Ember.Application.create();

App.Router.map(function() {
    this.resource('charts', {path: 'charts'}, function(){
        this.resource('chart-index', {path: 'index'});
        this.resource('chart-archive', {path: 'archive'});
    });
});

我的模板：

<script type="text/x-handlebars">
    <div>
        {{#link-to "chart-index" class="tab-item"}}
            Charts
        {{/link-to}}
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="charts">
    <div>
        {{#link-to 'chart-index' class="control-item"}}
            Latest Chart
        {{/link-to}}
        {{#link-to 'chart-archive' class="control-item"}}
            Chart Archive
        {{/link-to}}
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="chart-index">
    index
</script>
<script type="text/x-handlebars" id="chart-archive">
    archive
</script>

但是由于图表索引的主导航链接，当我点击图表存档时，它会失去突出显示。 jsfiddle：http://jsfiddle.net/kitsunde/mMYKp/1/

Answer 1

不确定您是否需要直接链接到索引路径。您应该能够直接链接charts的父资源，Ember将自动路由到ChartsIndex路由。

来自the docs：

转换为帖子或创建帖子链接相当于转换为posts.index或链接到posts.index

Haven没有测试过这个，但这应该确保你的活跃＆＃34;类已被应用。

如何在导航到不同的子/兄弟页面时保持主导航突出显示？

1 个答案: