An extension to KnockoutJS that lets you manage form messages and notifications that would be displayed, for example, when a form is submitted.
For a more complete set of examples, check out notification.html in the source
Consider the following example:
<span class="message" data-bind="notification: statusMessage"></span>
In this case, you are using the extension in its simplest form by simply passing a string observable to the "notification" data-bind attribute. In your code, you would just have to do:
xxx.viewModel.statusMessage('Saving...');
And now "Saving..." will show up in span.message and fade it out after 5 seconds (which is the default duration).
Now let's look at a more complex example passing in an object of properties (using message [required], duration, and hide):
<span data-bind="notification: {message: message, duration: 1000, hide: keepAlive }"></span>
And some JS to accompany it:
var viewModel = { message: ko.observable(''), keepAlive: ko.observable(true) }; ko.applyBindings(viewModel); viewModel.message('test'); //'test' will show up in our span, but it won't fade away because keepAlive is true
Then we could later run:
viewModel.keepAlive(false); viewModel.message('this will fade out'); //now that keepAlive is false, the message will fade out after 1000 milliseconds (as we chose above with the "duration" property)
For a full list of options and callback methods when passing in an object, see below (keep in mind that you can always just pass in a string observable and it will work with the default options)..
These are the settings and callback functions available for the extension (all properties can also be KO observables):
{ /* The message that you want to display * * @type String */ message: '', [no default value] [required] /* The duration (in millseconds) that you want the notification to appear (only matters if hide is true) * * @type Int */ duration: 5000, /* The duration (in millseconds) of the fade out (only matters if fade is true) * * @type Int */ fadeoutDuration: 200, /* Setting this to true makes sure the notification disappears * * @type Bool */ hide: true, /* Setting this to true makes sure the notification fades out (only matters if hide is true) * * @type Bool */ fade: true, /* The callback function to be called after the item is either gone or after it is created (if hide is false) * * @type Function */ callback: function() {} }