7

我相信随着我深入研究，这将变得清晰，但目前尚不清楚如何实现这一点。

我正在关注这篇关于路由的有用 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");
        }
  }) 
});
4

3 回答 3

9

现在看来这是不同的做法。我以这种方式取得了成功：

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({
});
于 2013-10-11T17:48:46.990 回答
9

使用 Ember CLI，您可以将重定向放在路由目录根目录下的 index.js 中：

import Ember from 'ember';

export default Ember.Route.extend( {
  redirect: function() {
    this.transitionTo('dashboard');
  }
});
于 2015-11-19T09:14:08.873 回答
4

您可以从索引重定向到主路由：

// 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>

于 2012-06-23T11:26:28.533 回答