Binding to Bootstrap alert widget. This binding can be used with virtual elements. Supports custom templates with observables
<div data-bind="alert: { message: message, type: type }"></div>
<div data-bind="alert: { message: 'Using custom alert template', template: 'alertExampleTemplate', type: 'danger' }"></div>
<!-- ko alert: { message: 'Using virtual root element', type: 'success' } -->
<!-- /ko -->
<script type="text/html" id="alertExampleTemplate">
<p data-bind="text: message"></p>
<button class="btn btn-primary" data-dismiss="alert">Close</button>
</script>
function AlertExampleViewModel() {
this.type = ko.observable('info');
this.message = ko.observable('Alert message');
}
All of the options can be observables.
data-bind="alert: { message: message, type: type, template: template, data: data, templateOptions: templateOptions }"
message
Type: string, can be observable
Text of alert message. Doesn't used if data property is specified.
type
Type: string, can be observable (default: 'info')
Type of alert message. Possible values are 'info', 'warning', 'danger', 'success'.
To specify your own type you should define css-styles for this type.
For exmaple, for type 'my-custom-type', you shoud provide css class 'alert-my-custom-type'.
template
Type: string, can be observable (default: 'alertTemplate')
Name of template for alert content. Default template:
<button class="close" data-dismiss="alert" aria-hidden="true">×</button> <p data-bind="text: message"></p>
data
Type: object, can be observable
Data for template. If this option is specified, message option will be ignored.
For default template, you should provide message property (or, if it will not provided via data, message option of binding will be used).
templateOptions
Type: object
Contains options for template.
They are: templateEngine, afterRender, beforeRender and afterAdd.
Please, see Knockout documentation for details.