4

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

  1. /login显示进入第二条路线的按钮
  2. /home显示一个按钮进入第一条路线

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

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

4

1 回答 1

4

你的代码：http: //jsfiddle.net/jPn3H/

...更新了一个全新的“应用程序”模板连接到：http App.ApplicationView: //jsfiddle.net/pauldechov/jPn3H/1/

该功能为您.initialize()附加。除非有连接，否则这些电话不会做任何事情。希望有帮助。App.ApplicationView<body>.connectOutlet(...){{outlet}}

于 2012-08-06T11:20:54.407 回答