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>

この 2 つの手法のより一般的な説明については、こちらを参照してください。

于 2013-11-07T19:34:34.293 に答える