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 回答