EmberJS的新功能，需要一些關於我的登錄代碼的幫助/建議

Question

我正在使用EmberJS前端到我的Spring後端API，我需要解決的第一件事是「登錄」屏幕。我一直在閱讀整個Web上的教程，無論我能在Ember上找到什麼，但是問題似乎是相同教程的不同版本以及做同樣事情的不同方式。這讓我感到困惑，但是經過一番苦苦掙扎之後，我想我可能終於設法讓我的登錄屏幕工作（部分）。

它使用ajax很好地驗證，我可以在開發控制檯中看到一切正常。

在我繼續下一步之前，我首先想要讓人們對我迄今爲止編寫的ember代碼有所瞭解，以及它是否屬於ember應用程序的「最佳實踐」。另外，如果有更好的方法去解決同樣的問題。

其次，我不知道如何切換到成功登錄的不同視圖。我承認我仍然不熟悉ember的概念，但在線教程只是讓我感到困惑。

我真的很感謝這裏的任何幫助。我是一個快速學習者，我認爲我可以從這裏拿東西取決於答案。

下面是從我app.js文件中的代碼：

App = Ember.Application.create(); 

//------------------------------------------------------------ 
// Hold the details of the logged-in user 
//------------------------------------------------------------ 
App.LoggedInDetails = Ember.Object.create({ 
    Fullname: null, 
    CompanyName: null, 
    TokenID: null, 

    setDetails: function(fullname, companyname, tokenid) 
    { 
     this.Fullname = fullname; 
     this.CompanyName = companyname; 
     this.TokenID = tokenid; 
    }, 

    clearDetails: function() 
    { 
     this.Fullname = null; 
     this.CompanyName = null; 
     this.TokenID = null; 
    } 
}); 

//------------------------------------------------------------ 
App.ApplicationView = Ember.View.extend({ 
    templateName: 'logged-out' 
}); 

App.ApplicationController = Ember.Controller.extend({ 
    isError: false, 
    errorMessage: null, 

    authenticate: function() 
    { 
     var email = this.get('email'); 
     var password = this.get('password'); 

     var url = 'https://api.example.com/security/authenticateUser.json'; 

     $.ajax({ 
      url: url, 
      type: 'POST', 
      dataType:'json', 
      data: {email: email, passwd: password}, 
      crossDomain: true, 
      context: this, 
      success: this.authenticateCompleted 
     }); 

     console.log('Url: ' + url); 
    }, 

    authenticateCompleted: function(data) 
    { 
     // Login was a success! 
     if(data.status === 'OK') 
     { 
      console.log('status: ' + data.status); 
      console.log('fullName: ' + data.fullName); 
      console.log('tokenId: ' + data.tokenId); 
      console.log('companyName: ' + data.companyName); 

      // Populate the LoggedInDetails object 
      App.LoggedInDetails.setDetails(data.fullName, data.companyName, data.tokenId); 

      this.set('isError', false); 
     } 
     else 
     { 
      App.LoggedInDetails.clearDetails(); 
      this.set('errorMessage', 'Invalid Email/Password Combination'); 
      this.set('isError', true); 

      console.log(data.status); 
      console.log(data.description); 
     } 
    } 
}); 

//------------------------------------------------------------ 
App.Router = Ember.Router.extend({ 
    enableLogging: true, 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function(router) { 
       router.get('applicationController').connectOutlet({ 
        viewClass: App.ApplicationView, 
        controller: router.get('applicationController') 
       }); 
      } 
     }) 
    }) 
}); 

//------------------------------------------------------------ 
App.LoggedInView = Ember.View.extend({ 
    templateName: 'logged-in' 
}); 

App.LoggedInController = Ember.Controller.extend({ 
    Fullname: App.LoggedInDetails.get("Fullname") 
}); 

//------------------------------------------------------------ 

App.initialize(); 

我的問題從「登出」默認視圖的「登錄」的觀點，這是實際的UI切換莖我的應用程序。

非常感謝您的幫助。

Answer 1

最簡單的方法：將isLoggedIn屬性添加到ApplicationController，並在用戶進行身份驗證時將其設置爲true。使ApplicationView呈現使用{{#if isLoggedIn}} ... {{else}} ... {{/if}}在登錄視圖和未登錄視圖之間切換的模板。