我目前正在与 Ember.js 合作开展一个工作项目 - 尽管我似乎一切正常,因为没有错误,但我只是想重构代码,因为我觉得我可能会遇到这个错误。
对于我的 Ember 应用程序的核心设置,我有以下代码,它允许我为标题和主要部分使用许多模板。主要部分包含一个出口,我可以将我的观点连接到:
App.ApplicationView = Em.ContainerView.extend({
childViews: [ 'headerView', 'mainView' ],
headerView: Ember.View.create({
tagName: 'header',
ariaRole: 'banner',
templateName: 'header'
}),
mainView: Em.ContainerView.create({
elementId: 'wrapper',
childViews: [ 'outletView' ],
outletView: Ember.View.create({
template: Ember.Handlebars.compile( '{{outlet}}' ),
})
})
});
然后我建立了我的观点。为了这篇文章的目的而剥离 - 并且不包括用户模型,因为这是不言自明的(用户名设置用于测试目的):
App.LoginView = Ember.View.extend({
templateName: 'log-in',
tagName: 'section',
ariaRole: 'main'
});
App.LoginViewController = Ember.ObjectController.extend({
content: App.User.create({ 'userName' : 'ben' })
});
然后我有我的路由器:
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('login');
}
})
})
});
而我的观点:
<script type="text/x-handlebars" data-template-name="log-in">
<h1>Sign In</h1>
<p>Sign in using the form below.</p>
<form id="log-in">
{{view Ember.TextField valueBinding="userName" name="UserName" id="UserName" type="email" placeholder="your.name@domain.com" required="required" }}
{{view Ember.TextField valueBinding="userPassword" name="UserPassword" id="UserPassword" type="password" required="required" }}
<input type="submit" value="Sign In" />
</form>
</script>
我的主要问题是控制器,现在从我在 Ember.js 上阅读的内容来看,这就是应该如何设置所有内容,但是使用上面的代码,我的 valueBindings 不起作用。
据我所知,这是因为我的索引路由使用的是 applicationController,而不是我的 loginViewController。因此,如果我将控制器更改为此:
App.ApplicationController = Ember.ObjectController.extend({
user: App.User.create({ 'userName': 'ben' })
});
然后我可以通过引用user.userName
fine 来访问我的视图中的对象,但是我的所有视图肯定都需要使用相同的控制器——这对我来说似乎不正确。当然每个视图都应该使用它自己的控制器?
如果我将路由器更改为连接到 loginViewController 而不是 applicationController - 那么应用程序会中断,因为我的 loginView 不包含 {{outlet}} 参数。
router.get('loginViewController').connectOutlet('login');
我错过了什么吗?它把我逼到了墙角,试图让这个完美。