使用Ember的全局通知视图
使用Ember的全局通知视图
提问于 2013-01-12 08:44:46
我有一个通知视图，负责在页面顶部显示全局消息(信息、警告、确认消息...)
为此，我创建了一个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' }
);
}
});理想情况下，我应该能够从任何控制器或路由发送事件，以显示具有适当内容和样式的视图。最好的架构方式是什么？
我想在我的应用程序的模板中使用一个命名的outlet，但是outlet不太适合动态视图。
<div id="content">
{{outlet notification}}
{{outlet}}
</div>我还在考虑将通知视图架构为对“应用程序”或“模块”状态的响应。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-13 13:55:16
因为您有想要在通知更改时运行的动画，所以您需要创建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"}}这将从ApplicationController获取其notification属性，因此我们将在控制器上创建一些其他控制器可以用来发送通知的方法：
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，一切都会正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14288980
复制相关文章
相似问题