開始使用Ember.js路由器

我想學習使用Ember.js爲我的下一個項目。到目前爲止，我已閱讀文檔here，但我沒有看到有關Router的解釋。然後我閱讀指南here，但我仍然不明白如何正確使用路由器。我嘗試使用路由器這樣，我想2路線：開始使用Ember.js路由器

/login，其顯示一個按鈕，進入第二路由
/home其中顯示一個按鈕，進入第一路由

這是隻是一個非常簡單的代碼來測試使用路由器在「頁面」之間切換。我嘗試使用此代碼，但我得到的是一個空白頁：

<script src="js/libs/jquery-1.7.2.min.js"></script> 
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script> 
<script src="js/libs/ember-1.0.pre.min.js"></script> 
<script> 
    var App = Ember.Application.create(); 

    App.ApplicationController = Ember.Controller.extend(); 
    App.ApplicationView = Ember.View.extend(); 

    App.LoginView = Ember.View.extend({ 
     templateName: 'login-page' 
    }); 

    App.HomeView = Ember.View.extend({ 
     templateName: 'home-page' 
    }); 

    App.router = Ember.Router.create({ 
     enableLogging: true, 
     root: Ember.Route.extend({ 
      index: Ember.Route.extend({ 
       route: '/', 
       redirectsTo: 'login' 
      }), 
      login: Ember.Route.extend({ 
       route: '/login', 
       doLogin: Ember.Route.transitionTo('home'), 
       connectOutlets: function (router) { 
        router.get('applicationController').connectOutlet('login'); 
       } 
      }), 
      home: Ember.Route.extend({ 
       route: '/home', 
       doLogout: Ember.Route.transitionTo('login'), 
       connectOutlets: function (router) { 
        router.get('applicationController').connectOutlet('home'); 
       } 
      }) 
     }) 
    }); 
    App.initialize(App.router); 
</script> 

<script type="text/x-handlebars" data-template-name="login-page"> 
    <h1>Login Page</h1> 

    <button {{action doLogin}}>Login</button> 
</script> 

<script type="text/x-handlebars" data-template-name="home-page"> 
    <h1>Home Page</h1> 

    <button {{action doLogout}}>Logout</button> 
</script>

當我運行此，該URL去#/login但它無法顯示。有沒有人可以告訴我如何使上面的代碼工作？爲什麼我會得到一個空白頁面？

來源

2012-08-06 Captain kurO

如果您將您的應用程序聲明爲全局（只是刪除var），該怎麼辦？此外，我想通過搜索一下SO，現在幾乎沒有路由器應用程序片段。 – 2012-08-06 10:20:55

你的應用程序視圖模板在哪裏？你連接到'登錄'和'家'的網點，但它在哪裏定義？ – zaplitny 2012-08-06 10:23:26

connectOutlet'home'將使用'HomeView'的實例，它是Ember.js的內部，刪除var沒有區別，並且我搜索了其他路由示例但仍然不明白爲什麼上面的代碼不工作 – 2012-08-06 11:03:56

您的代碼：http://jsfiddle.net/jPn3H/

......一個全新的 '應用' 迷上了模板更新爲App.ApplicationView：http://jsfiddle.net/pauldechov/jPn3H/1/

的.initialize()功能追加爲你App.ApplicationView到<body>。那些.connectOutlet(...)通話不會做任何事情，除非有一個{{outlet}}連接。希望有所幫助。

來源

2012-08-06 11:20:54 dechov

是的我剛剛找到了相同的解決方案，謝謝 – 2012-08-06 11:26:42

經過幾天的掙扎和無處可去，這是（幾乎）爲我工作的第一個hello world示例！一個問題是我需要包裝初始化調用： $（function（）{App.initialize（App.router）;}）; 所以它不會運行，直到一切加載。否則，我得到一個錯誤，指出它找不到應用程序模板。 – odigity 2012-08-31 05:03:33

開始使用Ember.js路由器

回答

相關問題