Question

我对如何在页面上管理未使用路线的全局部分感到困惑，例如通知下拉列表。

通知下拉列表将始终可见，并应相应更新。

这就是我的尝试。

在ApplcationContoller

上设置通知

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('notifications', this.store.find('notification'));
    }
});

并在ApplicationTemplate

中使用它们

<script type="text/x-handlebars">
   {{#each notifications}}
      Message: {{message}}
   {{/each}}
<script>

虽然这种方法有效但似乎并不正确，因为我希望通知至少拥有它自己的控制器。

所以我无法弄清楚如何将控制器分配给通知，因此我创建了一个通知视图，并试图以这种方式分配控制器。

为通知

创建了一个视图

App.NotificationsView = Ember.View.extend({
    controller: App.NotificationsController.create(),
    templateName: 'notifications'
});

创建了通知模板

<script type="text/x-handlebars" data-template-name="notifications">
    Notifications
</script>

创建了NotificationsController

App.NotificationsController = Ember.Controller.extend({
    init: function() {
        this._super();
        this.set('content', this.store.find('notification'));
    }
});

我收到以下错误。

Uncaught TypeError: Cannot call method 'find' of null

显然，this.store是null

总的来说，实现这种功能的最佳方法是什么？

Answer 1

您可以使用命名出口并实现所需的行为：

将名称商店添加到要提交通知的模板中：

<script type="text/x-handlebars">
   {{outlet notificationsOutlet}}

   {{outlet}}
<script>

在相应路线中设置控制器：

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this._super(controller, model);
        this.controllerFor('notifications').set('model', this.store.find('notification'));
    }
    ...
});

并渲染到指定的插座中：

App.ApplicationRoute = Ember.Route.extend({
    ...
    renderTemplate: function(controller, model) {
        this._super(controller, model);
        this.render("notifications", {
          into: "application", // should be possible to leave this one out
          outlet: "notificationsOutlet",
          controller: this.controllerFor("notifications")
        });
    }
});

<强>更新 甚至更短：使用{{render}}帮助程序！

再次像上面那样设置控制器：

App.ApplicationRoute = Ember.Route.extend({
        setupController: function(controller, model) {
            this._super(controller, model);
            this.controllerFor('notifications').set('model', this.store.find('notification'));
        }
        ...
    });

更容易渲染渲染：渲染帮助器允许您渲染按名称给出的控制器和视图。

<script type="text/x-handlebars">
   {{render notifications}}

   {{outlet}}
<script>

您可以找到有关这两种技术的更一般说明here。

管理不受路线控制的路段的最佳方式

1 个答案: