如何使用 Ember.js 制作警报通知组件? [英] How can I make an Alert Notifications component using Ember.js?
本文介绍了如何使用 Ember.js 制作警报通知组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的 Ember.js 应用程序中包含警报通知，例如 Bootstrap Alerts http://getbootstrap.com/javascript/#alerts 但我希望能够控制通知对象的创建或销毁，而不是 Bootstrap，因此我对对象有更多的Ember 控制".
如何编写 Ember.js 组件来执行此操作而不是使用 Bootstrap JavaScript?
解决方案
在此处查看工作演示:http://jsbin.com/ceseku/3/edit?html,css,js,输出
组件
逻辑
/*** 通知小工具的通知管理器* 管理传入交易并提供的对象* 无法直接访问App.Notification* 访问.** @例子* App.NotificationsManager.push({type: 'error', msg: '无法保留评论'});* App.NotificationsManager.push({msg: '无法保留评论'});* App.NotificationsManager.push('普通消息');*/App.NotificationsManager = Ember.Object.create({/*** 消息对象的数组存储* 输入 {数组}*/内容: Ember.A(),/*** @param options {Object} 包含 msg 和类型的消息对象*/推:功能(选项){var self = this,信息，类型;//成功|警告|错误|信息if (!Boolean(arguments)) 返回；if (typeof options === 'object' && options.msg) {消息 = 选项.msg;type = options.type ||'警告';} else if (typeof options === 'string') {消息 = 选项；类型 = '警告';} 别的 {返回假；}self.get('content').pushObject({类型:类型，消息:消息});}});/*** 通知小工具的通知项集合* @requires App.NotificationsManager*/App.NotificationsListComponent = Ember.Component.extend({类名:['通知']，标签名称:'部分'，内容:App.NotificationsManager.get('content')});/*** 通知小工具的通知项* @requires App.NotificationsListComponent*/App.NotificationsListItemComponent = Ember.Component.extend({classNames: ['Notifications__item', 'alert', 'alert-dismissible'],classNameBindings: ['typeClass'],项目:空，类型类:函数(){return 'alert-' + this.get('item.type');}.property('item.type'),isSuccess: 函数() {return this.get('item.type') === '成功';}.property('item.type'),持续时间:6000，计时器:空，显示通知:功能(时间){var self = this;self.set('定时器', window.setTimeout(function() {self.clearNotification();self.clearTimeout();}， 时间));},清除通知:函数(){this.$().fadeOut();App.NotificationsManager.get('content').removeObject(this.get('content'));this.set('定时器', null);},清除超时:函数(){var self = this;if (self.get('timer') !== null) {window.clearTimeout(self.get('timer'));self.set('定时器', null);}},didInsertElement:函数(){var self = this;this.showNotification(self.get('duration'));},鼠标输入:函数(){this.clearTimeout();},鼠标离开:函数(){var halfSpeedTime = this.get('duration')/2;this.showNotification(halfSpeedTime);},动作:{清除:函数(){this.clearNotification();}}//willDestroyElement: function() {//}});模板
<script type="text/x-handlebars" data-template-name="components/notifications-list-item"><div class="Notifications__item__icon">{{#if isSuccess}}<i class="glyphicon glyphicon-ok-sign info-icon"></i>{{别的}}<i class="glyphicon glyphicon-question-sign info-icon"></i>{{/如果}}<div class="Notifications__item__main"><span>{{item.message}}</span>
<button type="button" class="Notifications__item__close close" {{action "clear"}}><span aria-hidden="true">×</span><span class=sr-only">关闭</span></button>
样式
.Notifications {位置:固定；顶部:20px；正确:50%；左:50%；左边距:-200px；z-index: $zindex-navbar-fixed;宽度:400px；}.Notifications .info-icon {右边距:6px；}.Notifications__item {显示:表；光标:指针；box-shadow: 0 3px 3px rgba(black, .16), 0 3px 3px rgba(black, .23);宽度:90%；左边距:自动；右边距:自动；}.Notifications__item__icon,.Notifications__item__main,.Notifications__item__close {显示:表格单元格；垂直对齐:顶部；}.Notifications__item__icon {宽度:26px；}.Notifications__item__main span {自动换行:断字；文本换行:无；}}.Notifications__item__close {宽度:20px；文本对齐:右；}I want to include Alert Notifications in my Ember.js application like Bootstrap Alerts http://getbootstrap.com/javascript/#alerts but I want to be able to control the creation or destruction of notification objects instead of Bootstrap so I have more "Ember control" over the objects.
How can I write an Ember.js Component to do this instead of using the Bootstrap JavaScript?
解决方案
See a working demo here: http://jsbin.com/ceseku/3/edit?html,css,js,output
Component
Logic
/**
* Notifications Manager of Notifications Widget
* Object which manages incoming transactions and provides
* access to App.Notification which can not be directly
* accessed.
*
* @example
* App.NotificationsManager.push({type: 'error', msg: 'Unable to persist comment'});
* App.NotificationsManager.push({msg: 'Unable to persist comment'});
* App.NotificationsManager.push('Plain message');
*/
App.NotificationsManager = Ember.Object.create({
/**
* Array store for message objects
* type {Array}
*/
content: Ember.A(),
/**
* @param options {Object} the message object containing msg and type
*/
push: function(options) {
var self = this,
message,
type; // success|warning|error|info
if (!Boolean(arguments)) return;
if (typeof options === 'object' && options.msg) {
message = options.msg;
type = options.type || 'warning';
} else if (typeof options === 'string') {
message = options;
type = 'warning';
} else {
return false;
}
self.get('content').pushObject({
type: type,
message: message
});
}
});
/**
* A collection of Notification Items of Notification Widget
* @requires App.NotificationsManager
*/
App.NotificationsListComponent = Ember.Component.extend({
classNames: ['Notifications'],
tagName: 'section',
content: App.NotificationsManager.get('content')
});
/**
* A Notification Item of Notification Widget
* @requires App.NotificationsListComponent
*/
App.NotificationsListItemComponent = Ember.Component.extend({
classNames: ['Notifications__item', 'alert', 'alert-dismissible'],
classNameBindings: ['typeClass'],
item: null,
typeClass: function() {
return 'alert-' + this.get('item.type');
}.property('item.type'),
isSuccess: function() {
return this.get('item.type') === 'success';
}.property('item.type'),
duration: 6000,
timer: null,
showNotification: function(time) {
var self = this;
self.set('timer', window.setTimeout(function() {
self.clearNotification();
self.clearTimeout();
}, time));
},
clearNotification: function() {
this.$().fadeOut();
App.NotificationsManager.get('content').removeObject(this.get('content'));
this.set('timer', null);
},
clearTimeout: function() {
var self = this;
if (self.get('timer') !== null) {
window.clearTimeout(self.get('timer'));
self.set('timer', null);
}
},
didInsertElement: function() {
var self = this;
this.showNotification(self.get('duration'));
},
mouseEnter: function() {
this.clearTimeout();
},
mouseLeave: function() {
var halfSpeedTime = this.get('duration') / 2;
this.showNotification(halfSpeedTime);
},
actions: {
clear: function() {
this.clearNotification();
}
}
// willDestroyElement: function() {
// }
});
Templates
<script type="text/x-handlebars" data-template-name="components/notifications-list">
{{#each notification in content}}
{{notifications-list-item item=notification}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="components/notifications-list-item">
<div class="Notifications__item__icon">
{{#if isSuccess}}
<i class="glyphicon glyphicon-ok-sign info-icon"></i>
{{else}}
<i class="glyphicon glyphicon-question-sign info-icon"></i>
{{/if}}
</div>
<div class="Notifications__item__main">
<span>{{item.message}}</span>
</div>
<button type="button" class="Notifications__item__close close" {{action "clear"}}><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</script>
Styles
.Notifications {
position: fixed;
top: 20px;
right: 50%;
left: 50%;
margin-left: -200px;
z-index: $zindex-navbar-fixed;
width: 400px;
}
.Notifications .info-icon {
margin-right: 6px;
}
.Notifications__item {
display: table;
cursor: pointer;
box-shadow: 0 3px 3px rgba(black, .16), 0 3px 3px rgba(black, .23);
width: 90%;
margin-left: auto;
margin-right: auto;
}
.Notifications__item__icon,
.Notifications__item__main,
.Notifications__item__close {
display: table-cell;
vertical-align: top;
}
.Notifications__item__icon {
width: 26px;
}
.Notifications__item__main span {
word-wrap: break-word;
text-wrap:none;
}
}
.Notifications__item__close {
width: 20px;
text-align: right;
}
这篇关于如何使用 Ember.js 制作警报通知组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
