Ember.js 路由器入门答案

【问题标题】：Getting Start with Ember.js RouterEmber.js 路由器入门
【发布时间】：2023-03-14 14:05:01
【问题描述】：

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

/login 显示进入第二条路线的按钮
/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，但它什么也不显示。有谁可以告诉我如何使上面的代码工作？为什么我得到一个空白页？

【问题讨论】：

如果您将您的应用声明为全局（仅删除 var）怎么办？而且，我想通过SO搜索一下，现在路由器应用sn-ps已经很少了。
您的应用程序视图模板在哪里？您连接到“登录”和“家庭”插座，但它是在哪里定义的？
connectOutlet 'home' 将使用 'HomeView' 的实例，它是 Ember.js 的内部，删除 var 没有区别，我确实在 SO 上搜索了其他路由示例但仍然不明白为什么上面的代码不起作用
抱歉，我已经看到很多关于这个的问题，所以我只想确定答案还没有在这里。

标签： javascript ember.js ember-old-router

【解决方案1】：

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

...更新了与App.ApplicationView 挂钩的全新“应用程序”模板：http://jsfiddle.net/pauldechov/jPn3H/1/

.initialize() 函数为您将App.ApplicationView 附加到<body>。除非有{{outlet}} 可以连接，否则那些.connectOutlet(...) 电话不会做任何事情。希望对您有所帮助。

【讨论】：

经过几天的挣扎却一无所获，这是第一个（几乎）对我有用的 hello world 示例！一个问题是我需要包装初始化调用： $(function() { App.initialize(App.router); });这样它就不会运行，直到一切加载。否则我会收到一条错误消息，指出它找不到应用程序模板。