从Ember.js路由器开始

本文介绍了从Ember.js路由器开始的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想学习使用Ember.js作为我的下一个项目。到目前为止，我已经阅读了文档，但是我没有看到关于路由器的说明。然后我阅读了的指南，但我仍然不明白如何正确使用路由器。
我以这种方式尝试使用路由器，我想要2路由：

I want to learn using Ember.js for my next project. So far I have read the documentation here but I saw no explanation about Router. Then I read the guide here but I still don't understand how to use Router properly.I tried using Router this way, I want 2 route:

/ login 显示一个按钮进入第二条路线

/ home 其中显示一个按钮进入第一条路线

/login which displays a button to enter the second route
/home which displays a button to enter the first route

这只是一个非常简单的代码，用于使用路由器在页面之间切换。
我试过使用这个代码，但是我得到的只是一个空白页面：

This is just a very simple code to test using Router to switch between "pages".I tried using this code but all I get is a blank page:

<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 但它什么都不显示。
有没有人可以告诉我如何使上述代码工作？为什么我得到一个空白页？

When I run this, the URL goes to #/login but it display nothing.Does anyone can show me how to make the above code works? Why do I get a blank page?

jPn3H

从Ember.js路由器开始

问题描述

推荐答案