JSPM – ko-alerts@1.0.0

Package Exports

ko-alerts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ko-alerts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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',
    alerts: 'bower_components/ko-alerts/lib/alerts'
  }
});

require(['knockout', 'alerts'], function(ko, alerts) {
  ko.components.register('alerts', alerts);
});

Alert Component

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

Options

options.title

Alert title. Displays in <strong>. Optional.

options.description

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!',
      description: 'You did something right!',
      type: 'success'
    },
    {
      title: 'Warning!',
      description: 'This could be dangerous.',
      type: 'warning'
    },
    {
      title: 'Error!',
      description: 'You did something wrong!',
      type: 'danger'
    },
    {
      title: 'Info!',
      description: 'You might wanna know...',
      type: 'info'
    }
  ]);
}

Screenshots

Bootstrap Demo

ko-alerts