0

我对如何管理页面上不使用路由的全局部分感到困惑，例如通知下拉菜单。

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

这是我尝试过的。

将通知设置在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

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

4

1 回答 1

2

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

在要呈现通知的模板中添加一个命名的插座：

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

您可以在此处找到对这两种技术的更一般描述。

于 2013-11-07T19:34:34.293 回答