Ember.js路由：如何設置默認路由立即渲染？

Question

我敢肯定，當我深入挖掘時，這將變得清晰，但是現在，如何實現這一目標並不明顯。

我正在關注有關路由的這篇有用的SO文章的信息，但是示例中缺少一個重要的部分，即如何在不必單擊“主頁”鏈接的情況下立即呈現“主頁”視圖？

我已經開始深入研究文檔以試圖弄清楚這一點，但同時為后代回答似乎是一個有用的問題。

我一直在玩與工作的jsfiddle例如，從上面的問題， 在這里 ，並與該其他例子比較我發現， 似乎有默認的路由工作

到目前為止，它仍然是一個謎。

當前代碼 ：

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',

  root: Em.State.extend({
    // EVENTS
    goHome: Ember.State.transitionTo('home'),
    viewProfile: Ember.State.transitionTo('profile'),

    // STATES
    index: Em.State.extend({
        route: "/",
        redirectsTo: 'home'
    }),

    home: Em.State.extend({
        route: '/home',
        connectOutlets: function(router, context) {
            var appController = router.get('applicationController');
            appController.connectOutlet('home');
        }
    }),

    // STATES
    profile: Em.State.extend({
        route: '/profile',
            connectOutlets: function(router, context) {
              var appController = router.get('applicationController');
              appController.connectOutlet('profile');
            }
        }),
        doOne: function() {
            alert("eins");
        }
  }) 
});

---

更新：解決方案

事實證明，我使用的示例不起作用的原因是因為它使用的是Em.State.extend而不是Em.Route.extend 。 有趣的是，當我逐步完成並逐一更改它們時，該示例在我將它們全部更改之前不起作用。

這是工作示例 ：

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',

  root: Em.Route.extend({
    // EVENTS
    goHome: Ember.State.transitionTo('home'),
    viewProfile: Ember.State.transitionTo('profile'),

    // STATES
    index: Em.Route.extend({
        route: "/",
        redirectsTo: 'home'
    }),

    home: Em.Route.extend({
        route: '/home',
        connectOutlets: function(router, context) {
            var appController = router.get('applicationController');
            appController.connectOutlet({name: 'home'});
        }
    }),

    // STATES
    profile: Em.Route.extend({
        route: '/profile',
            connectOutlets: function(router, context) {
              var appController = router.get('applicationController');
              appController.connectOutlet('profile');
            }
        }),
        doOne: function() {
            alert("eins");
        }
  }) 
});

Answer 1

現在似乎已經完成了不同的工作。 我用這種方式取得了成功：

App = Ember.Application.create();

App.Router.map(function() {
  // 'index' route is default
  this.resource('dashboard');
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        // this redirects / to /dashboard
        this.transitionTo('dashboard');
    }
});

App.DashboardRoute = Ember.Route.extend({
});

Answer 2

使用Ember CLI，您可以將index.js中的重定向放在routes目錄的根目錄中：

import Ember from 'ember';

export default Ember.Route.extend( {
  redirect: function() {
    this.transitionTo('dashboard');
  }
});

Answer 3

您可以從索引到主路由進行重定向：

 // Default route $(function() { App = Em.Application.create(); // Instantiated and wired up for you in App.initialize() App.ApplicationController = Em.Controller.extend(); App.ApplicationView = Em.View.extend({ templateName: 'application' }); App.NavController = Em.Controller.extend({}); App.NavView = Em.View.extend({ templateName: 'nav' }); App.HomeController = Em.Controller.extend({}); App.HomeView = Em.View.extend({ templateName: 'home' }); App.ProfileController = Em.Controller.extend({}); App.ProfileView = Em.View.extend({ templateName: 'profile' }); App.Router = Em.Router.extend({ enableLogging: true, location: 'hash', root: Em.Route.extend({ goHome: Ember.State.transitionTo('home'), goProfile: Ember.State.transitionTo('profile'), index: Em.Route.extend({ route: '/', redirectsTo: 'home' }), home: Em.Route.extend({ route: '/home', connectOutlets: function(router, context) { router.get('applicationController').connectOutlet({ name: 'home' }); } }), profile: Em.Route.extend({ route: '/profile', connectOutlets: function(router, context) { console.log("enter"); router.get('applicationController').connectOutlet({ name: 'profile' }); } }) }) }); App.initialize(); }); 

 <script type="text/x-handlebars" data-template-name="application"> {{view App.NavView controllerBinding="controller.controllers.navController"}} <hr /> <div class="content"> {{outlet}} </div> </script> <script type="text/x-handlebars" data-template-name="nav"> <h1>navigation:</h1> <button {{action goHome}}>home</button> <button {{action goProfile}}>profile</buton> </script> <script type="text/x-handlebars" data-template-name="home"> <h1>Home...</h1> </script> <script type="text/x-handlebars" data-template-name="profile"> <h1>Profile...</h1> </script>