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>