javascript - 基于 currentPath 的 Ember 导航栏 UI 条件

Question

我一定没有做正确的事情。我有以下内容:

application.hbs

{{#view App.NavbarView}}{{/view}}
{{outlet}}

使用以下导航栏模板

_navbar.hbs

<div class="toolbar">
<div class="row">
    <div class="absolute top-left">
        <button {{action "back"}} class="btn passive back"><i class="fa fa-play"></i></button>
    </div>

    {{#if hasTabs}}
        <div class="small-centered columns">
            <div class="tabs">
                <ul>
                    {{#link-to 'stories' tagName="li" class="tab"}}<i class="fa fa-book"></i> Stories{{/link-to}}
                    {{#link-to 'mylevels' tagName="li" class="tab"}}<i class="fa fa-user"></i> My Levels{{/link-to}}
                    {{#link-to 'arcade.index' tagName="li" class="tab"}}<i class="fa fa-gamepad"></i> Arcade{{/link-to}}
                </ul>
            </div>
        </div>
    {{else}}
        <div class="small-6 small-offset-3 columns">
            <h2 class="title">{{ pageTitle App.currentPath }}</h2>
        </div>
    {{/if}}

    {{#if currentUser.userName}}
        <div class="absolute top-right">
            <span class="user-hello">Welcome Back, <strong>{{ currentUser.userName }}</strong></span>
            <button {{action "transitionAccount" currentUser._id}} class="square logged-in"><i class="fa fa-user"></i></button>
        </div>
    {{ else }}
        <div class="absolute top-right">
            <button {{action "transitionLogin"}} class="square logged-out"><i class="fa fa-user"></i></button>
        </div>
    {{/if}}
</div>
</div>

所以它只是一个典型的固定导航栏，在它的中间我显示您所在的页面，如果您碰巧位于具有选项卡式内容的页面上，我会显示一个选项卡容器。

所以我只是在我的应用程序 Controller 中使用 this.get('currentPath') 并将其与一组路线名称进行比较以触发 true/false (我需要一个观察者，以便它查看自导航栏以来的路线变化位于应用程序级别的内联 View 中)。

app.js

App.ApplicationController = Ember.ObjectController.extend({
updateCurrentPath: function() {
    App.set('currentPath', this.get('currentPath'));
}.observes('currentPath'),

tabs: function() {
    var route = this.get('currentPath'),
        group = ['arcade.index', 'mylevels', 'stories', 'arcade', 'arcade.loading'];

    console.log("ROUTE: ", route);

    var tabs = group.indexOf(route) > -1 ? true : false;
    return tabs;

}.observes('currentPath'),

    // no idea what to do here
hasTabs: function() {
    this.tabs();
}.property('tabs')
});

所以，基本上，无论如何，选项卡 UI 都会显示，但我只希望它在选项卡观察者为 true 时显示。通过一些调试，我得到了我期望的所有控制台输出，但我尝试只执行 {{#if tabs}} (仅直接使用观察者)并且始终触发 true (始终显示选项卡 UI)。我认为这是因为它是一个观察者，而不是我可以在模板中使用的实际 Controller 属性，因此我尝试仅设置 hasTabs 属性并引用观察者，但这似乎不起作用。我意识到我从根本上不明白这应该如何运作。有什么想法吗？

Answer 1

如果我正确理解你的问题，你应该能够将你的代码更改为这个(将选项卡重命名为hasTabs，删除了以前的hasTabs函数。从观察currentPath更改为当前路径的属性，删除选项卡变量赋值并替换为返回，将 bool 条件简化为简单的比较运算符)。无论如何，这就是我要做的。 :) H2H

hasTabs: function() {
    var route = this.get('currentPath'),
        group = ['arcade.index', 'mylevels', 'stories', 'arcade', 'arcade.loading'];

    return group.indexOf(route) > -1;
}.property('currentPath')