Question

我一定不能做对。我有以下内容：

application.hbs

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

使用以下Navbar模板

_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>

所以它只是一个典型的固定导航栏，在它的中间我显示你所在的页面，如果你碰巧在一个带有标签内容的页面上，我会显示一个标签容器。

所以我只是在我的App控制器中使用this.get（'currentPath'）并将它与一组路由名称进行比较以触发true / false（我需要一个观察者，因此它会查看自Navbar以来的路由更改在应用程序级别的内联视图中。

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都会显示，但我只希望它显示如果选项卡观察者是真的。通过一些调试，我得到了我期望的所有控制台输出，但我尝试了{{#if tabs}}（只是直接使用观察者）并且总是触发true（总是显示选项卡UI）。我假设那是因为它是一个观察者而不是我可以在我的模板中使用的实际控制器属性，所以我尝试设置hasTabs属性并引用观察者，但这似乎不起作用。我意识到我从根本上不明白这应该如何运作。有什么想法吗？

Answer 1

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

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

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

基于currentPath的Ember navbar UI条件

1 个答案: