Javascript 开始使用Ember.js路由器

我想学习在下一个项目中使用Ember.js。到目前为止，我已经阅读了文档，但没有看到关于路由器的任何解释。然后我读了指南，但我仍然不明白如何正确使用路由器。 我试着用这种方式使用路由器，我想要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>

var App=Ember.Application.create（）；
App.ApplicationController=Ember.Controller.extend（）；
App.ApplicationView=Ember.View.extend（）；
App.LoginView=Ember.View.extend({
templateName:“登录页面”
});
App.HomeView=Ember.View.extend({
templateName:“主页”
});
App.router=Ember.router.create({
enableLogging:true，
根：Ember.Route.extend({
索引：Ember.Route.extend({
路线：“/”，
重定向至：“登录”
}),
登录名：Ember.Route.extend({
路由：'/login'，
doLogin:Ember.Route.Transitiono（'home'），
连接插座：功能（路由器）{
router.get（'applicationController'）.connectOutlet（'login'）；
}
}),
主页：Ember.Route.extend({
路线：'/home'，
doLogout:Ember.Route.transitiono（'login'），
连接插座：功能（路由器）{
路由器.get（'applicationController'）.connectOutlet（'home'）；
}
})
})
});
应用程序初始化（应用程序路由器）；
登录页面
登录
主页
注销

当我运行此程序时，URL会转到

#/login

，但它不会显示任何内容。 有人能告诉我如何使上述代码工作吗？为什么我会得到一个空白页？

您的代码：

…使用连接到

App.ApplicationView

的全新“应用程序”模板进行更新：

---

.initialize（）

函数为您将

App.ApplicationView

附加到

。那些

.connectOutlet（…）

调用不会做很多事情，除非有一个

{{outlet}}

来连接。希望这能有所帮助。

如果您将应用程序声明为全局应用程序（只是删除var），该怎么办？此外，我认为通过搜索SO，现在路由器应用程序代码片段很少了。您的应用程序视图模板在哪里？你连接到'login'和'home'插座，但它是在哪里定义的？connectOutlet'home'将使用'HomeView'实例，它是Ember.js的内部，删除var没有任何区别，我确实搜索了另一个路由示例，但仍然不明白为什么上面的代码不起作用我道歉，我看到了很多关于这方面的问题，所以我只想确定答案还没有出现。经过几天的挣扎和一事无成，这是第一个hello world的例子，它（几乎）完全适用于我！一个问题是我需要包装初始化调用：$（function（）{App.initialize（App.router）；}）；这样它就不会运行，直到所有东西都加载。否则，我会得到一个错误，说明它找不到应用程序模板。