7

深く掘り下げれば明らかになると思いますが、今のところ、これを実現する方法は明らかではありません。

ルーティングに関するこの役立つ SO 記事の情報に従っていましたが、この例には重要な部分が欠けています。つまり、「ホーム」リンクをクリックせずに「ホーム」ビューをすぐにレンダリングするにはどうすればよいですか?

私はこれを理解するためにドキュメントを掘り下げ始めましたが、その間、後世のために答えたのは有用な質問のようです.

上記の質問hereの動作中の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. 興味深いのは、それらを 1 つずつ変更していくと、すべてを変更するまで例が機能しないことです。

これが実際の例です：

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

Ember CLI を使用すると、ルート ディレクトリのルートにある index.js にリダイレクトを配置できます。

import Ember from 'ember';

export default Ember.Route.extend( {
  redirect: function() {
    this.transitionTo('dashboard');
  }
});
于 2015-11-19T09:14:08.873 に答える
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 に答える
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 に答える