2

我目前正在与 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.userNamefine 来访问我的视图中的对象,但是我的所有视图肯定都需要使用相同的控制器——这对我来说似乎不正确。当然每个视图都应该使用它自己的控制器?

如果我将路由器更改为连接到 loginViewController 而不是 applicationController - 那么应用程序会中断,因为我的 loginView 不包含 {{outlet}} 参数。

router.get('loginViewController').connectOutlet('login');

我错过了什么吗?它把我逼到了墙角,试图让这个完美。

4

1 回答 1

1

这是命名约定的问题。尝试将控制器的名称更改为 LoginController 而不是 LoginViewController。

在后台,connectOutlet('login') 将在 App 命名空间中搜索 LoginView 和 LoginController 类。如果找不到控制器,它只会连接视图。因此,在您的版本中,正在连接 LoginView,但 LoginViewController 被忽略了。然后 LoginView 在 ApplicationController 的上下文中呈现,这就是当您尝试将用户属性放在那里时一切正常的原因。

此外,最佳实践是在 connectOutlets 回调中设置控制器内容。这应该有效:

App.LoginView = Ember.View.extend({
    templateName: 'log-in',
    tagName: 'section',
    ariaRole: 'main'
});

App.LoginController = Ember.ObjectController.extend({});
App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
        route: '/',
        connectOutlets: function (router, context) {
            user = App.User.create({ 'userName' : 'ben' })
            router.get('applicationController').connectOutlet('login', user);
        }
    })
  })
});
于 2013-01-04T16:26:27.787 回答