KnockoutNotification

An extension to KnockoutJS that lets you manage form messages and notifications that would be displayed, for example, when a form is submitted.

examples

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)..

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() {}
}