Просмотр глобальных уведомлений с использованием Ember

У меня есть уведомление, отвечающее за отображение глобальных сообщений в верхней части страницы (информация, предупреждение, подтверждающие сообщения...)

Я создал NotificationView для этой цели, определил его свойство содержимого и предоставил двум обработчикам отображение и скрытие представления.

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>

Я также думал об архитектуре представления уведомления как ответ на состояние "Приложение" или "Модуль".

Ответы

Ответ 1

Поскольку у вас есть анимации, которые вы хотите запустить при изменении уведомлений, вам нужно создать подкласс 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, и все будет работать.

Ответ 2

Я не согласен с тем, что уведомления должны быть View, я думаю, что они должны быть Компонентом. Затем они также более гибки для использования в вашем приложении.

Вместо этого можно указать компонент : Как создать компонент уведомлений о предупреждениях с помощью Ember.js?