根據登錄狀態更改導航欄

Question

我一直在嘗試使用Rails/Ember pre-4來做一個相當典型的事情，那就是有一個帶導航欄和內容部分的頁面。導航欄僅在登錄時發生變化（登錄時顯示註銷按鈕，註銷時顯示登錄和註冊按鈕），而不是每次更改頁面。

起初以爲我能做到在application.hbs模板的東西，如：

{{視圖導航欄}} {{口}}

在哪裏設置導航欄響應登錄狀態變化（由國家經理管理）。這似乎沒有工作。

然後我試圖像（也application.hbs）：

{{出口導航欄}} {{出口}}

，並試圖在每個路由，這導致大量的設定導航欄也沒有最終的工作。

在發佈代碼之前，想知道是否有人已經對這種常見情況有了很好的解決方案，其中頁面的某些部分（如導航欄或側欄）僅在應用程序狀態發生某些更改時發生更改，而不是每次發生頁面更改。

Answer 1

有很多方法可以做到這一點。你描述的第一種方法與我們正在做的最接近。在過去的版本中，我們使用了view helper來實現這一點，今天我們使用{{render}}，但它的基本概念相同。例如，application.hbs可能是這樣的：

{{render navbar}} {{outlet}} 

現在navbar.hbs可以用一個簡單的{{#if}}助手交換基於登錄狀態的鏈接。

<div class="navbar"> 
    <div class="navbar-inner"> 
    {{#linkTo index class="brand"}}My App{{/linkTo}} 
    <ul class="nav"> 
     <li>{{#linkTo index}}Home{{/linkTo}}</li> 
     <li>{{#linkTo about}}About{{/linkTo}}</a></li> 
    </ul> 
    <ul class="nav pull-right"> 
    {{#if isAuthenticated}} 
    <li><a {{action logout}} href="#">Logout</a></li> 
    {{else}} 
    <li><a {{action login}} href="#">Login</a></li> 
    {{/if}} 
    </ul> 
    </div> 
</div> 

現在我們向追蹤和管理登錄狀態的NavbarController添加邏輯。

App.NavbarController = Ember.ArrayController.extend({ 
    isAuthenticated: false, 
    login: function() { 
    this.set('isAuthenticated', true); 
    }, 
    logout: function() { 
    this.set('isAuthenticated', false); 
    } 
}); 

在真正應用NavbarController將代理這些請求到另一個控制器，也許currentUserController。我在這裏創建了一個工作示例：http://jsbin.com/iyijaf/6/edit