17

ページの上部にグローバル メッセージ (情報、警告、確認メッセージなど) を表示する通知ビューがあります。

この目的のために NotificationView を作成し、コンテンツ プロパティを定義し、ビューを表示および非表示にする 2 つのハンドラーを提供しました。

APP.NotificationView = Ember.View.extend({
    templateName: 'notification',
    classNames:['nNote'],
    content:null,

    didInsertElement : function(){                
    },

    click: function() {
        var _self = this;
        _self.$().fadeTo(200, 0.00, function(){ //fade
            _self.$().slideUp(200, function() { //slide up                    
                _self.$().remove(); //then remove from the DOM
            });
        });
       _self.destroy();
    },

    show: function() {
        var _self = this;
        _self.$().css('display','block').css('opacity', 0).slideDown('slow').animate(
            { opacity: 1 },
            { queue: false, duration: 'slow' }
        );          
    }
});

理想的には、適切なコンテンツとスタイルでビューを表示するために、任意のコントローラーまたはルートからイベントを送信できる必要があります。これを設計する最善の方法は何でしょうか

アプリケーションのテンプレートで名前付きアウトレットを使用することを考えましたが、アウトレットは動的ビューにはあまり適していません。

<div id="content">
    {{outlet notification}}
    {{outlet}}
</div>

また、「アプリケーション」または「モジュール」状態への応答として通知ビューを設計することも考えていました。

4

2 に答える 2

24

通知が変更されたときに実行するアニメーションがあるため、Ember.View(「ウィジェット」)のサブクラスを作成する必要があります。

App.NotificationView = Ember.View.extend({
  notificationDidChange: function() {
    if (this.get('notification') !== null) {
      this.$().slideDown();
    }
  }.observes('notification'),

  close: function() {
    this.$().slideUp().then(function() {
      self.set('notification', null);
    });
  },

  template: Ember.Handlebars.compile(
    "<button {{action 'close' target='view'}}>Close</button>" +
    "{{view.notification}}"
  )
});

このウィジェットには、notificationプロパティがあることが期待されます。applicationテンプレートから設定できます：

{{view App.NotificationView id="notifications" notificationBinding="notification"}}

これはnotificationからプロパティを取得ApplicationControllerするため、他のコントローラーが通知を送信するために使用できるいくつかのメソッドをコントローラーに作成します。

App.ApplicationController = Ember.Controller.extend({
  closeNotification: function() {
    this.set('notification', null);
  },

  notify: function(notification) {
    this.set('notification', notification);
  }
});

dashboardここで、ルートに入るたびに通知を作成したいとしましょう。

App.DashboardRoute = Ember.Route.extend({
  setupController: function() {
    var notification = "You have entered the dashboard";
    this.controllerFor('application').notify(notification);
  }
});

ビュー自体が DOM を管理し、アプリケーション コントローラーがnotificationプロパティを管理します。この JSBinですべてが機能していることがわかります。

通知を表示するだけで、アニメーションを気にしない場合は、次のようにすればよいことに注意してください。

{{#if notification}}
  <div id="notification">
    <button {{action "closeNotification"}}>Close</button>
    <p id="notification">{{notification}}</p>
  </div>
{{/if}}

applicationテンプレートで、同じ を使用すると、ApplicationControllerすべてが機能します。

于 2013-01-13T05:55:16.013 に答える