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属性。你可以看到它全部工作at this JSBin。

请注意，如果您只想显示通知，并且不关心动画，那么您可能已经完成了：

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

在您的application模板中，使用相同的ApplicationController，一切都会正常工作。

Answer 2

我不同意Notifications应该是一个View，我认为它们应该是一个组件。然后，它们也可以更灵活地在您的应用程序中使用。

您可以在此处回答通知组件：How can I make an Alert Notifications component using Ember.js?

全局通知使用Ember查看

2 个答案: