1

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

应用程序.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>

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

所以我只是在我的 App 控制器中使用 this.get('currentPath') 并将其与一组路由名称进行比较以触发真/假（我需要一个观察者，因此它会查看路由更改，因为导航栏是内联的在应用程序级别查看）。

应用程序.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 属性并引用观察者，但这似乎不起作用。我意识到我根本不明白这应该如何工作。有什么想法吗？

4

1 回答 1

0

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

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

    return group.indexOf(route) > -1;
}.property('currentPath')
于 2014-03-10T00:08:06.843 回答