全局通知如何使用Ember进行查看?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

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

我为此目的创建了一个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>
提问于
用户回答回答于

由于你在通知更改时想要运行动画,因此你需要创建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}}
用户回答回答于

我不同意通知应该是一个视图,我认为他们应该是一个组件。那么他们也更灵活,可以在整个应用程序中使用。

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问5 回答
  • 无聊至极

    4 粉丝504 提问5 回答
  • 嗨喽你好

    7 粉丝480 提问4 回答
  • 富有想象力的人

    4 粉丝0 提问3 回答

扫码关注云+社区

领取腾讯云代金券