Components to display bootstrap and bootstrap-like alerts.
Install from bower:
bower install ko-alerts --save
Or install from npm:
npm install ko-alerts --save
Load module:
// app.js
require.config({
paths: {
knockout: 'bower_components/knockout/dist/knockout',
text: 'bower_components/text/text',
'ko-alerts': 'bower_components/ko-alerts'
}
});
require(['knockout'], function(ko) {
ko.components.register('alerts', { require: 'ko-alerts/lib/alerts' });
});
<alert params="alert:options, onClose:onClose"></alert>
Alert title. Displays in <strong>
. Optional.
Alert message.
Alert type (ie. success
, warning
, danger
, info
). Can be any string.
Alert will have class of alert-{type}
.
Defaults to info
.
Boolean. Determines if close button should be visible and adds class of alert-dismissible
.
Defaults to true
.
Callback function to be invoked when the alert is dismissed by the user.
The following arguments are provided:
options
: alert propertiesalertViewModel
: alert viewmodele
: click event
Alert will not hide itself if you provide a custom onClose function. You can do that by setting the alert's visibile
observable to false
.
function(options, alertViewModel, e) {
alertViewModel.visible(false);
}
<alerts params="alerts:alerts"></alerts>
Your ViewModel:
function MyShinyViewModel() {
this.alerts = ko.observable([
{
title: 'Success!',
message: 'You did something right!',
type: 'success'
},
{
title: 'Warning!',
message: 'This could be dangerous.',
type: 'warning'
},
{
title: 'Error!',
message: 'You did something wrong!',
type: 'danger'
},
{
title: 'Info!',
message: 'You might wanna know...',
type: 'info'
}
]);
}
Copyright (c) 2015 Marius Craciunoiu. Licensed under the MIT license.