17

我有一个通知视图，负责在页面顶部显示全局消息（信息、警告、确认消息......）

为此，我创建了一个 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>

我还考虑将通知视图构建为对“应用程序”或“模块”状态的响应。

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 回答
0

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

您可以使用通知组件代替此处回答：如何使用 Ember.js 制作警报通知组件？

于 2014-11-21T20:59:42.023 回答