Question

我目前正在与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}}' ),
        })
    })
});

然后我设置了我的观点。为了这篇文章的目的而被剥离 - 并且不包括用户模型，因为这是非常明显的（用于测试目的的userName）：

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来访问我视图中的对象，但是当然我的所有视图都需要使用相同的控制器 - 这对我来说似乎不对。当然每个视图都应该使用它自己的控制器吗？

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

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

我错过了什么吗？它正在推动我试图让这个完美无瑕。

Answer 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);
        }
    })
  })
});

潜在的误解路由和控制器

1 个答案: