Create a simple notification bar with KnockoutJS

In this article I am going to show you how to create a simple notification system with KnockoutJS. If you’ve never done something with KnockoutJS before, you really should. It makes creating rich, interactive snippets on your website so much easier, without having to worry all to much about the JavaScript behind it.

What is KnockoutJS?

According to their own site “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.”. The way I would describe it, it’s that KnockoutJS is an awesome piece of JavaScript that allows you to manipulate the DOM just by assigning values to variables. That’s right: No longer you have to write clingy JavaScript to show or hide specific fields according to some vague state, no longer you have to re-bind click events on newly created DOM elements, KnockoutJS does it all baby!

What is MVVM?

KnockoutJS describes itself as a MVVM-technology. Now, you might be familiar with MVC, but what is MVVM and how does it differ from MVC? Well you can go ahead and read the long story, but if you’re like me and you like a short description that says it all, you could see it like this: Where the main target for MVC is the application as a whole, MVVM’s main target is the UI of the application. The model and the view in MVVM are the same as with MVC: the model provides the data and the view displays it. But the last VM in MVVM stands for ‘View Model’, and that’s the part of the view that communicates with the View and the Model. For example: the View Model reflects data changes in the Model directly in the View, but the other way around it also reflects changes in the View (user input for example) directly in the Model. This two-way traffic makes the MVVM pattern so extremely useful in frontend development.

What are we going to create?

Here is a little demo of what we are going to create:

See the Pen Simple notification with KnockoutJS by Giel Berkers (@kanduvisla) on CodePen.

Now you could just go ahead and take the HTML, the CSS and the JavaScript from the example code, but if you really would like to learn something, just read my explanation with this code.

Step 1: Create the model

The frist thing we do is create our own self-contained space for our model. We call it NotificationModel , because that’s what it is: a model to handle our notifications. Now the functionality of our model is very basic: we can add notifications (addNotification() ), and remove them (removeNotification() ). But before we get to that, notice the first line:

Now, it’s worth explaining what’s going on here: we are creating an observable array. And this is exactly the whole point of KnockoutJS: observables. An observable array is nothing more than a regular array: it has array-like functions, like push() , shift() , unshift()  etc. But the main key here is that we can use the manipulation of this array to trigger other elements. Take the following line of HTML for example:

Notice the data-bind -attribute. This is where KnockoutJS does it’s magic. What it actually does is it tells the DOM: “If there are items in the notifications array, make this element visible, otherwise not.”. This single line just saved us a whole lot of JavaScript that would struggle with show()  and hide() -commands and such (you know what library I’m talking about!).
Now there is just one thing left to do: we created our model, now KnockoutJS must do something with it. Add the following lines of JavaScript to your code:

So, now KnockoutJS will apply our NotificationModel bindings when the DOM is loaded. How exciting is that! Let’s take a look at the complete HTML…

Step 2: Create the HTML

As you might see, our HTML is very simple, lean and complete. The main thing to notice here are the various data-bindings. I’ll explain them one by one:

• <div class=”notice” data-bind=”visible: notifications().length > 0″> : As I pointed out in the previous chapter, this data-binding makes sure that this element only gets shown when the notifications-array contains any items.
• <ul data-bind=”foreach: notifications”> : The foreach-loop in this element renders a list-item for each item in our observable array. How neat is that?
• <span data-bind=”text: message”></span> : You may have noticed that the addNotification() -method in our NotificationModel  pushes objects to the array with the key message . Well, this line here renders the value of that key.
• <a href=”#” data-bind=”click: $parent.removeNotification” class=”close”> : This data-binding executes our removeNotification() -method of our NotificationModel  when a user clicks on this link.

And I wish I could tell you more, but that’s about it! You now have a notification model in KnockoutJS that renders notifications and allows the user to click them away! You can try it out by manually adding a notification to you notification models’ instance:

Now for some styling …

Step 3: Style it so it looks fancy!

Well, you can style it any way you like, but for a notification box I would suggest you make it sticky (fixed) on the top of your page. Here is the styling I used in the example. It’s in SCSS but you’ll figure it out:

In conclusion

In this tutorial I showed you the very basics of how easily you can create cool things with KnockoutJS. A notification system is one, but you can manipulate so much more with it. I created a Phonegap App with KnockoutJS for example and it works like a charm! And you don’t need any external libraries or anything for it to work!
So if you’re looking into a small library to aid you in your next web project with a lot of UI stuff, consider giving KnockoutJS a try. I’m sure you will love it!