Knockout Alerts

Components to display bootstrap and bootstrap-like alerts.

Getting Started

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 Component

<alert params="alert:options, onClose:onClose"></alert>

Options

options.title

Alert title. Displays in <strong>. Optional.

options.message

Alert message.

options.type

Alert type (ie. success, warning, danger, info). Can be any string.

Alert will have class of alert-{type}.

Defaults to info.

options.dismissible

Boolean. Determines if close button should be visible and adds class of alert-dismissible.

Defaults to true.

onClose

Callback function to be invoked when the alert is dismissed by the user.

The following arguments are provided:

• options: alert properties
• alertViewModel: alert viewmodel
• e: 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 Component

<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'
    }
  ]);
}

Screenshots

License

Copyright (c) 2015 Marius Craciunoiu. Licensed under the MIT license.