1

私は正しいことをしていないに違いない。私は次のものを持っています：

アプリケーション.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>

つまり、すべてが典型的な固定ナビゲーション バーであり、その中央に現在のページを表示します。たまたまタブ付きコンテンツを含むページにいる場合は、代わりにタブ コンテナーを表示します。

したがって、アプリコントローラーで 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 は表示されますが、そのタブ オブザーバーが true の場合にのみ表示するようにします。いくつかのデバッグで、私が期待するすべてのコンソール出力を取得していますが、 {{#if tabs}} (オブザーバーを直接使用するだけ) を実行しようとしましたが、常に true が発生します (常にタブ UI が表示されます)。これは、オブザーバーであり、テンプレートで使用できる実際のコントローラー プロパティではないためだと思いました。そのため、hasTabs プロパティを設定してオブザーバーを参照しようとしましたが、うまくいかないようです。これがどのように機能するかを根本的に理解していないことに気づきました。何かご意見は？

4

1 に答える 1

0

私があなたの質問を正しく理解していれば、コードをこれに変更するだけでよいはずです (タブの名前を hasTabs に変更し、以前の hasTabs 関数を削除しました。observes currentPath から現在のパスのプロパティに変更し、tabs 変数の割り当てを削除し、return に置き換えました。ブール条件を単純な比較演算子に減らしました)。とにかく、これは私がすることです。:) 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 に答える