全局通知使用Ember查看

Question

我有一个通知视图,负责在页面顶部显示全局消息(信息,警告,确认消息......)

我为此创建了一个NotificationView,定义了它的content属性并提供了两个处理程序来显示和隐藏视图.

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>

我还在考虑将通知视图设计为对"应用程序"或"模块"状态的响应.

Answer 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东西,一切都会正常工作.