3

我现在正在玩 emberjs 几天，并认为我了解了基础知识。现在我正在尝试构建一个真实世界的应用程序并且已经陷入了一个奇怪的问题。

我想要一个应用程序模板，它使用“视图”助手来包含其他一些视图。我还想要一些“全局”模型，其中包含我希望能够在不同视图中使用的环境信息（例如登录的用户帐户信息等）。

我试过这个：http: //jsfiddle.net/UzgMd/7/

<script type="text/x-handlebars" data-template-name="header">
    <div>Header {{fullName}}</div>
</script>

<script type="text/x-handlebars" data-template-name="sidebar">
    <div>Sidebar</div>
</script>

<script type="text/x-handlebars" data-template-name="application">
    <div>{{view App.HeaderView}}</div>
    <div>{{view App.SidebarView}}</div>
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script type="text/javascript" src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.2.js"></script>
<script type="text/javascript" src="https://raw.github.com/MilkyWayJoe/cdnjs/master/ajax/libs/ember-data.js/0.12.00-latest20130328/ember-data-latest.js"></script>

使用以下JS：

App = Ember.Application.create();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});
App.AccountInfo = DS.Model.extend({

    firstName: DS.attr('string'),
    lastName: DS.attr('string'),

    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.AccountInfo.FIXTURES = [{
    id: 1,
    firstName: "John",
    lastName: "Doe"
}];

//App.headerController = Ember.ObjectController.extend({}).create(); // works
App.HeaderController = Ember.ObjectController.extend({}); // doesnt work

App.HeaderView = Ember.View.extend({
    templateName: 'header',

    //controller: App.headerController // works
    controller: App.HeaderController.create() // doesnt work
});
App.SidebarView = Ember.View.extend({
    templateName: 'sidebar'
});

App.ApplicationController = Ember.Controller.extend({});
App.ApplicationRoute = Ember.Route.extend({

    model: function() {
        return App.AccountInfo.find(1);
    },

    setupController: function(controller, model) {
        this._super(controller, model);

        //App.headerController.set('model', model); // works
        this.controllerFor('header').set('content', model); // doesnt work

    }

});

但它不起作用，因为第 47 行中的 controllerFor() 方法返回了 HeaderController 的新实例，而不是第 30 行中已经创建的实例。如果我再次调用 controllerFor()，则不会创建新实例，但会创建实例通过第 47 行的调用返回 - 我觉得有点混乱。

但是，如果我这样做：http: //jsfiddle.net/UzgMd/8/

App = Ember.Application.create();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});
App.AccountInfo = DS.Model.extend({

    firstName: DS.attr('string'),
    lastName: DS.attr('string'),

    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.AccountInfo.FIXTURES = [{
    id: 1,
    firstName: "John",
    lastName: "Doe"
}];

App.headerController = Ember.ObjectController.extend({}).create(); // works
//App.HeaderController = Ember.ObjectController.extend({}); // doesnt work

App.HeaderView = Ember.View.extend({
    templateName: 'header',

    controller: App.headerController // works
    //controller: App.HeaderController.create() // doesnt work
});
App.SidebarView = Ember.View.extend({
    templateName: 'sidebar'
});

App.ApplicationController = Ember.Controller.extend({});
App.ApplicationRoute = Ember.Route.extend({

    model: function() {
        return App.AccountInfo.find(1);
    },

    setupController: function(controller, model) {
        this._super(controller, model);

        App.headerController.set('model', model); // works
        //this.controllerFor('header').set('content', model); // doesnt work

    }

});

使用我注入模型的单例控制器实例，一切正常。

现在我的问题：

  • controllerFor() 创建一个新实例是一个错误吗？如果不是，为什么它会这样或者我做错了什么？
  • 我在第二把小提琴中的工作方式是正确的方法，还是有更好的方法？
4

1 回答 1

4

我想要一个应用程序模板，它使用“视图”助手来包含其他一些视图。

{{view}}如果您想要的只是一个没有控制器的简单 Ember.View，则该助手是合适的。例如像 Ember.InputField 这样的东西。对于应用程序的标题和侧边栏，您通常需要一个由控制器支持的视图。在这种情况下，请改用{{render}}助手。请查看此博客文章了解更多详细信息。

我还想要一些“全局”模型，其中包含我希望能够在不同视图中使用的环境信息（例如登录的用户帐户信息等）。

说得通。存储该信息的正确位置是在控制器中。这可能是ApplicationController一个单独的控制器（如currentUserController. 由于视图应该只访问它自己的控制器的属性，因此您可以使用控制器的needs数组来使其可访问。请参阅管理控制器之间的依赖关系

controllerFor() 创建一个新实例是一个错误吗？

不，这不是错误。

如果不是，为什么它会这样或者我做错了什么？

问题是您正在尝试手动创建 headerController 的实例。一般来说，如果您在控制器上调用 create()，那么就会出现问题。Ember 希望自己管理控制器实例，并将它们注册到容器上，以便以后可以找到它们。由于您的实例未注册，因此当您调用 controllerFor() 时，ember 创建了一个新实例。

我在第二把小提琴中的工作方式是正确的方法，还是有更好的方法？

绝对不是正确的方法。在这个小提琴中，您使用全局变量来完成 ember 应该自动为您做的事情。这意味着有很多代码是不必要的，而且对象之间也有很多耦合，这使得事情很难测试。如果你采用这种{{render}}方法，它看起来像这样：

<script type="text/x-handlebars" id="application">
    {{render header}}
    {{render sidebar}}
    {{outlet}}
</script>
<script type="text/x-handlebars" id="header">HEADER {{content}}<hr/></script>
<script type="text/x-handlebars" id="sidebar">SIDEBAR {{content}}<hr/></script>


App = Ember.Application.create({});
App.HeaderController = Ember.ObjectController.extend();
App.SidebarController = Ember.ObjectController.extend();
App.IndexRoute = Ember.Route.extend({
    setupController: function() {
      this.controllerFor('header').set('content', 'hi');
      this.controllerFor('sidebar').set('content', 'bye');
    }
});

使用{{render}}我们不需要定义 HeaderView 或 SidebarView，因为 ember 会自动生成它们。每个都将绑定到其控制器的单例实例，并且可以通过controllerFor.

JSFiddle在这里：http: //jsfiddle.net/NQKvy/1/

于 2013-07-01T22:00:42.950 回答