Tag Archives: MVVM

MEAN web development #6: AngularJS in the front

Hi all and welcome back! Welcome back to me too as I’ve been away for a while. Let’s just say I was enjoying a summer vacation from blogging. But I’m back to finish this MEAN series! This week I’ve got AngularJS for you. Maybe next week too.
And in case you need a refresher, here are my previous posts about MEAN:

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

So in the previous post we’ve seen how we can build pages using the Jade template engine. Pretty sweet, but we need something bigger, better and badder for our front-end.

You can find the examples for this blog on my GitHub page in the mean6-blog repository.

What is AngularJS?

You may have heard of AngularJS before. It’s one of the most popular open-source front-end JavaScript frameworks for the web developed by Google. And, of course, it’s the A in MEAN. But what does it do?

AngularJS is an MVVM framework, much like Knockout.js. It does a bit more than Knockout.js does though. Next to bindings AngularJS can be used for DOM manipulation, more like jQuery. And it does even more, like handling AJAX and routing. As Google likes to put it: AngularJS is “Superheroic” in that it does just about everything.

So instead of talking let’s see some action! First of all we need to install AngularJS. You can download it from the AngularJS website, or you can install it through a package manager such as npm or Bower (install angular). I’ve discussed all three methods in earlier posts so I will not repeat them here. Anyway, if you’ve downloaded my samples from GitHub you’ll be good to go.

The first examples of this post can be tested using nothing but the file system. For later examples with AJAX we’re going to need a little Node.js server, so I’ll add that later. The non-server examples can be found in the front-end.html and the front-end.js files.

So let’s take a look at a first example.

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
    </head>
    <body ng-app>
        <p>This is your first angular expression: {{ 'This is AngularJS' + ' syntax!' }}</p>
    </body>
</html>

So there are two things going on here. First is the ng-app directive in the body element. This tells AngularJS that body is the root element of our application and that AngularJS should do its magic. You can place it anywhere you want (like in the html element, or maybe a div element somewhere) and a page can have multple ng-app directives (which I won’t be doing in this post).

Next is, of course, the weird {{ }} syntax, which is the syntax AngularJS uses for its bindings. In this case you’ll see that ‘This is AngularJS’ and ‘ syntax!’ are, indeed, appended in your browser, like it was just some JavaScript. Try using {{ 1 + 2 }} and you’ll see it will print ‘3’ since 1 + 2 equals 3 in JavaScript (and not ’12’).

Now let’s look at something really very cool. Suppose you want to bind some value to an input. Here’s how to do it.

<body ng-app>
    <p>Enter you name:
        <input type="text" ng-model="firstName" />
        <input type="text" ng-model="lastName" />
    </p>
    <p>You have entered: {{ firstName + ' ' + lastName }}</p>
</body>

No JavaScript required! Wow, that is so cool! And firstName and lastName are updated real time, while you’re typing! We bound our inputs using the ng-model directive which takes care of creating and binding the firstName and lastName properties.

Enter controllers

You’ll often want more control over your code and putting all of your JavaScript into your HTML is not a good idea. So we’ll want to use AngularJS with some custom JavaScript file that we wrote. This is where things get tricky. Not very tricky, but you just got to know how it works.

An AngularJS application is defined by modules. Modules then define controllers.

angular.module('fullNameApp', [])
    .controller('fullNameController', function ($scope) {
        $scope.firstName = '';
        $scope.lastName = '';
        $scope.fullName = function () {
            return $scope.firstName + ' ' + $scope.lastName;
        };
    });

So as we see here we create a module by calling the angular.module function and passing it more than one parameter. This returns an application so we can call the controller function directly on the return value. In the controller function we pass in the name of the controller, so we can use it in our HTML, and a constructor function, which receives a $scope variable to which we can append properties.

Now our HTML would look like this:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="front-end.js"></script>
    </head>
    <body ng-app="fullNameApp">
        <div ng-controller="fullNameController">
            <p>Enter you name:
                <input type="text" ng-model="firstName" />
                <input type="text" ng-model="lastName" />
            </p>
            <p>You have entered: {{ fullName() }}</p>
        </div>
    </body>
</html>

So as you can see we’ve now named our ng-app directive and we’ve added a div element with an ng-controller directive which points to our fullNameController controller. Finally, we now use the fullName function. Notice that we could now set default values in our controller and they’ll be displayed on our page automatically.

$scope.firstName = 'Sander';
$scope.lastName = 'Rossel';

More directives

So let’s take a look at some more directives that can help you build amazing pages. ng-repeat can be used to repeat an element for every item in a list. So let’s add a little array on our controller.

$scope.favoriteMovies = [
    'Star Wars',
    'Lord of the Rings',
    'Fight Club'
];

And display it in an unordered list.

<ul>
    <li ng-repeat="movie in favoriteMovies">
        {{ movie }}
    </li>
</ul>

Now we want to be able to add and delete items from the list. This next piece might blow your mind, but there’s a very simple directive to make a text input that can make a comma separated list and convert it to an array real time.

<input type="text" ng-model="favoriteMovies" ng-list />

So we bind the input to our favoriteMovies using ng-model and then use ng-list to convert it to a comma separated list. Try adding “, Pulp Fiction” (or whatever movie you like) to the text input and the movie will automatically be added to the unordered list we had before!
And if you want something else instead of a comma specifiy it in the ng-list, like so:

<input type="text" ng-model="favoriteMovies" ng-list=" | " />

And what if we add objects instead of strings?

$scope.favoriteAlbums = [
    { artist: 'The Beatles', title: "Sgt. Pepper's Lonely Hearts Club Band" },
    { artist: 'Moby', title: 'Play' },
    { artist: 'The Prodigy', title: 'Fat Of The Land' }
];
<ul>
    <li ng-repeat="album in favoriteAlbums">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

So how about making that editable?

<div ng-repeat="album in favoriteAlbums">
    <input type="text" ng-model="album.artist" />
    <input type="text" ng-model="album.title" />
</div>
<button ng-click="favoriteAlbums.push({})">New album</button>

And that’s where we see the ng-click in action. Of course we could’ve called a function on our controller too.

$scope.addAlbum = function () {
    $scope.favoriteAlbums.push({});
};
<button ng-click="addAlbum()">New album</button>

There’s a little problem with ng-repeat that isn’t quite obvious from these examples. ng-repeat creates a separate scope for each object in an array. For objects this is no problem, but if you were binding to an array of primitives, such as integers or strings, the values wouldn’t be updated. So just remember to use objects when wanting to update array elements.

So how about adding a little styling to our page? With the ng-class directive we can add styles to elements based on some boolean value. The best part is you can add multiple classes based on one or more boolean values. So I have added a little embedded CSS to our page.

<style>
    .colored {
        color: red;
    }
 
    .underlined {
        text-decoration: underline;
    }
</style>

And two properties in the controller to specify whether we want some text to be colored and/or underlined.

$scope.addColor = true;
$scope.addUnderline = false;

Now in our HTML we can add two checkboxes for the two properties above and then add an ng-class directive on some element that adds the CSS classes based on the JavaScript properties.

Color: <input type="checkbox" ng-model="addColor" />
Underline: <input type="checkbox" ng-model="addUnderline" />
<p ng-class="{ colored: addColor, underlined: addUnderline }">This text might be colored and/or underlined!</p>

Pretty sweet, right? As you can see ng-class should simply evaluate to an object where each property is a class name with a value true or false to specify whether it should be applied.

But there’s an alternative. We could simply specify a string too. So consider the next JavaScript function which returns a string:

$scope.getClasses = function () {
    var classes = '';
    if ($scope.addColor) {
        classes += 'colored ';
    }
    if ($scope.addUnderline) {
        classes += 'underlined ';
    }
    return classes;
};

We can now use ng-class as follows:

<p ng-class="getClasses()">This text might be colored and/or underlined!</p>

Or you could return an array where each element is either an object such as in the first method or a string such as in the second method. I’ll leave that as practice for the reader though.

Also fun to mention, when you’re inside an ng-repeat directive you can use ng-class-even and ng-class-odd which work exactly as ng-class, but apply the styles only to even or odd elements.

Filters

AngularJS had a feature called filters. It can format values or actually filter lists.

Let’s go back to the first example. Let’s suppose you wanted to show full name in just uppercase or in just lowercase. This is an easy task!

<p>You have entered: {{ fullName() | uppercase }}</p>
<p>You have entered: {{ fullName() | lowercase }}</p>

We can also use a filter to format numbers and dates. It looks kind of the same, except this time you throw in a format.

<p>
    <input type="text" ng-model="number"><br>
    Number (default): {{ number | number }}<br>
    Number (no fractions): {{ number | number: 0 }}<br>
    Number (three fractions): {{ number | number: 2 }}
</p>
<p>
    Date (default): {{ date | date }}<br>
    Date (dd-MM-yyyy): {{ date | date: 'dd-MM-yyyy' }}<br>
    Date (yy/M/d): {{ date | date: 'yy/M/d' }}<br>
    Date (full): {{ date | date: 'fullDate' }}<br>
    Date (long): {{ date | date: 'longDate' }}
</p>

And for arrays you can do some awesome stuff too!  For this we use the orderBy or filter filter.

<h3>Ordered by title</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'title'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Ordered by artist reverse</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'artist' : true">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on everything with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: 'y'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on artist with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: { artist: 'y' }">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

Keep in mind that we can get these values from our JavaScript controller as well. You can make the most awesome dynamic filters with very little trouble. Just make sure you pass in an object with the same properties as the objects you’re repeating and set their values to the values you’d like to filter.

AJAX with AngularJS

So as mentioned AngularJS does a lot more than just HTML binding. One feature we’re going to look at here is that of the $http service. Needless to say we’ll need a little back-end server to communicate with, so for the AJAX examples I’m going to create a Node.js server and some new HTML and JavaScript so we can serve them up using our Node.js server.

Here’s the server:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

var books = [
    { title: 'Lord of the Rings', author: 'J.R.R. Tolkien' },
    { title: 'Harry Potter', author: 'J.K. Rowling' },
    { title: "The Hitchhiker's Guide to the Galaxy", author: 'Douglas Adams' }
];

app.use(bodyParser.json());
app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/ajax-example.html');
});

app.get('/books', function (req, res) {
    res.send(books);
});

app.post('/addBook', function (req, res) {
    var book = req.body;
    books.push(book);
    res.send(books);
});

var server = app.listen(80, '127.0.0.1');

So there’s a lot going on there. First of all I’ve added some Express. I’m also requiring body-parser (npm install body-parser), which is needed to get our POST data. Then I call the app.use function a couple of times. We’ve seen it before. It simply adds a middleware to a path. In this case we tell it to parse any JSON body so we can use it in our app. We also tell it that we can serve static files from the public folder (so we can serve the HTML and JavaScript file).
After that we serve the page by browsing to the root or root/index. I’ve also specified a GET for root/books, which simply returns a list of books (as JSON). And, what it’s all about, a POST to add a book to the list of books.

Let’s look at our front-end JavaScript.

angular.module('ajaxApp', [])
    .controller('ajaxController', function ($scope, $http) {
        $scope.newAuthor = null;
        $scope.newTitle = null;
        $scope.books = [];
        $scope.getBooks = function () {
            $http.get('http://localhost/books')
            .then(function (response) {
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while getting the books!');
            });
        };
    $scope.addBook = function () {
        $http.post('http://localhost/addBook', { author: $scope.newAuthor, title: $scope.newTitle })
            .then(function (response) {
                $scope.newAuthor = null;
                $scope.newTitle = null;
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while adding a new book!');
            });
        };
    });

So that’s quite a thing too! First of all notice a $http parameter being passed to the controller constructor function. We’ll need this $http parameter to make HTTP calls. Now we first use this in the getBooks function. You’ll see that using this $http stuff is actually very simple! We use $http.get and pass it our URL to get the books. It returns a promise, which has a then function that takes two callbacks, a success function and a failure function. The functions are executed once the asynchronous call returns (AJAX is asynchronous, remember?). So if everything goes right we simply assign the data (a list of books) to the books property. If something goes wrong we show an alert.

In the addBook function I’m using the $http.post function. It’s really similar to the get example, except we’re now passing in some data, a new book. Upon success the book list, including the new book, is returned and we reset the newAuthor and newTitle (nice example of two-way binding by the way).

Now for the HTML:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS AJAX example</title>
        <script src="angular.min.js"></script>
        <script src="ajax-example.js"></script>
    </head>
    <body ng-app="ajaxApp">
        <div ng-controller="ajaxController">
 
            <h2>AJAX example</h2>
            <button ng-click="getBooks()">Get books</button>
            <ul>
                <li ng-repeat="book in books">
                    {{ book.author + ' - ' + book.title }}
                </li>
            </ul>
 
            <input type="text" ng-model="newAuthor" />
            <input type="text" ng-model="newTitle" />
            <button ng-click="addBook()">Add book</button>
        </div>
    </body>
</html>

And there you have it!

So AngularJS can do two-way binding, supports MVVM and MVC architecture, it can do AJAX, but also routing, internationalization and localization, you can write custom directives and customize all you like, it supports testing and it has lots of directives I haven’t discussed like ng-show, ng-hide, ng-form, ng-blur… I guess Google wasn’t exaggerating when they called AngularJS ‘superheroic’ because it really seems to have some super powers!

And of course I’ll be leaving you with some recommended reading. As you know I’m a big fan of the (free) Succinctly series by Syncfusion, so here’s two must reads: AngularJS Succinctly and Node.js Succinctly. Also check out these awesome books by Manning Publications: AngularJS In Action, AngularJS In Depth, Node.js In Action (Second Edition) and Getting MEAN. And a book I’ve recently picked up at work: Pro AngularJS.
Well, that should keep you busy for a few months!

Happy coding!

Knockout.js for data binding in HTML and JavaScript

Hi there, and welcome to another article on web development. This week we’ll be looking at Knockout.js, an MVVM library that makes data binding in HTML and JavaScript a whole lot easier. If that meant nothing to you don’t worry, that’s what I’m here for. If you’re unfamiliar with HTML and/or JavaScript I suggest you follow my series on starting web development. You can find the first part here: Web development #1: Internet and the World Wide Web.

If you like my blogs please subscribe. You can enter your email at the top right corner of this page. Don’t worry, I’m not going to sell you anything, but you’ll get new posts in your mailbox as soon as I post them.
Also, if you haven’t done so yet, make sure to follow me on Twitter @sanderrossel for other interesting articles and industry updates.

All the examples for this blog are published on my GitHub account. You can get them at the knockout-blog repo.

So with that out of the way, let’s get started!

Knockout.js basics

So what exactly is this Knockout.js? Simply said Knockout links data, from your JavaScript, to your HTML page and updates that data if it changes, either from your page (by user action) or in your JavaScript. This linking is called binding.
As mentioned Knockout is an MVVM library, which stands for Model View ViewModel, but that still doesn’t tell us much. Well, look at it this way, you probably have data to show on your page, this is your Model. This can be anything, like user information, blog posts or a list of sales orders. Your HTML page is your View, it’s what people see. The ViewModel is an abstract intermediary that communicates between your View and your Model. The key for this communication is a binder, a component that takes care of this communication.
So that sounds pretty abstract and difficult, right? Here’s the good news though, you can pretty much forget about it. The takeaway is that MVVM enables for a separation of your View (user interface, or (G)UI) and your domain data and logic. That also means you can, theoretically, rewrite your entire View without having to touch your domain. And it means one person can be writing the View while another is working on the business logic, boosting a team’s productivity. The Windows Presentation Foundation (WPF) is another example of MVVM.

So Knockout is an MVVM library, but what does this mean for us developers? How about an example? Of course we’ll need an HTML page and some JavaScript. That’s all, so I’m not going to incorporate a back end. I did, however, make use of jQuery, to show the real strength of Knockout. So I’m going to show two input fields where you can enter your first and your last name. Whenever you change either your first or last name your full name is shown below the inputs. Easy as pie. First you’ll need to get Knockout and jQuery. Head over to the Knockout download page (version 3.3.0) and the jQuery download page (version 2.1.3) to get them. Of course if you got the source from my GitHub you’re already good to go. So here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h2>jQuery form</h2>
            <p>First name: <input id="firstName" /></p>
            <p>Last name: <input id="lastName" /></p>
            <h2>Hello, <span id="fullName"></span>!</h2>
        </div>
 
        <div>
            <h2>Knockout form</h2>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <h2>Hello, <span data-bind="text: fullName"></span>!</h2>
        </div>
 
        <script src="jquery-2.1.3.min.js"></script>
        <script src="knockout-3.3.0.js"></script>
        <script src="HelloWorld.js"></script>
    </body>
</html>

And here’s the HelloWorld.js.

$(function () {
    // Doing our own 'binding' using jQuery.
    $('#firstName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $(this).val() + ' ' + $('#lastName').val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Sander');
    
    $('#lastName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $('#firstName').val() + ' ' + $(this).val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Rossel')
    // Trigger the change event to update the fullname.
    .change();
    
    
    // Knockout binding!
    var person = {
        firstName: ko.observable(''),
        lastName: ko.observable('')
    };
    
    // Set the values, notice that they're functions!
    person.firstName('Sander');
    person.lastName('Rossel');
    // Compute full name.
    person.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, person);
    ko.applyBindings(person); // This makes Knockout get to work
});

So that’s a lot of code! Let’s break it down. The HTML for the jQuery form is simple and straightforward, so let’s skip that. The HTML for the Knockout form has some weird stuff though, what’s all this data-bind? This is a custom Knockout attribute (all custom HTML5 attributes have the data- prefix) that defines what attributes on the HTML element should bind to what properties on your binding context (we’ll see that in a minute). The binding then makes sure that any changes in your form are reflected in your data and vice versa. So, for example, the input that takes your first name has its value attribute bound to some firstName property on the binding context. The syntax for the binding is “name: value [, anotherName: someValue]”. We’ll see a couple of different bindings throughout this post.

Now if we look at the JavaScript we first see the jQuery implementation. This makes us select the #firstName and #lastName elements, get their value and then update the #fullName element. It’s just all DOM traversal really, nothing special about it. Now the Knockout implementation is something different! We define an object (which is really our ViewModel) with a firstName and a lastName and we assign to them whatever ko.observable(initialValue) returns. And here is the trick, really. These observables notify our page when a change is made.
After that I’m setting the values for firstName and lastName. I could’ve done that right away, but I want to emphasize that firstName and lastName are not simply our first and last names (strings), but they are actually functions (because that’s what ko.observable() returned). Changing them will require us to invoke that function and passing in the new value as a parameter. Likewise, getting the values requires us to invoke these functions, but passing in no parameters.
After that I’m giving person its fullName property, assigning to it the return value of ko.pureComputed(function, this). I didn’t specify it in the object literal, because ko.pureComputed() takes a parameter that serves as this. In the object literal I can’t use person just yet, because we’re creating it and the this will be the window if I’m not specifying it. The computed value keeps track of all its bindings (firstName and lastName) and updates automatically when one of them changes.
Last, but not least I’m calling ko.applyBindings(context) and pass it our person object. This sets the binding context and will cause our page to be updated and show the values of our person object.

I don’t know about you, but I’m not so excited about that pureComputed… So let me give you a little alternative to creating that person using a function and a constructor.

var Person = function(firstName, lastName) {
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.fullName = ko.pureComputed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, this);
}
var person = new Person('Sander', 'Rossel');

Better, no?

So that’s a whole lot to take in and with a few lines of jQuery you can get the exact same result! So why then would we use Knockout?

Building a contact form

Well, first of all, with jQuery you need to manually update variables in memory and values on your page. With just a name this isn’t a big deal, but what if you had an entire contact form? Let’s create one using Knockout. You should see that our JavaScript code isn’t growing much bigger, while this would be quite a hassle using jQuery. So here’s some contact form HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>Contact</h1>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <p>Email: <input type="email" data-bind="value: email" /></p>
            <p>Subject: <input data-bind="value: subject" /></p>
            <p>Your question: <textarea rows="5" data-bind="value: content"></textarea></p>
            <p><button data-bind="click: submit">Submit</button></p>
        </div>
 
        <script src="knockout-3.3.0.js"></script>
        <script src="ContactForm.js"></script>
    </body>
</html>

And here’s the ContactForm.js.

var form = {
    firstName: ko.observable(''),
    lastName: ko.observable(''),
    email: ko.observable(''),
    subject: ko.observable(''),
    content: ko.observable(''),
    submit: function() {
        alert("You entered:"
            + "\nFirstname: " + this.firstName()
            + "\nLastname: " + this.lastName()
            + "\nEmail: " + this.email()
            + "\nSubject: " + this.subject()
            + "\nContent:\n" + this.content());
        }
};

ko.applyBindings(form);

Now that’s looking more like it! We simply create some object, bind it to our form and we have nothing else to worry about. Notice that I bind the click event of the button to the submit function, this is called the click binding.
Now here you should see some real gain from Knockout! Look at that code, it’s just an object and when submit is called we have the most recent values. No need for any DOM traversal on our side. The beauty is that you can use this form obect anywhere in your code and nowhere do you have to worry about getting the correct values from- or updating the correct values to the DOM.

Arrays and foreach

So what if we have an array of items and we want to bind to that? Luckily Knockout has an observableArray which makes this pretty easy. So let’s say we have an array with Album objects. Each album has an artist, name and genre. If we’d create a table it may look like this.

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td data-bind="text: artist"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: genre"></td>
        </tr>
    </tbody>
</table>

So albums is just an observableArray, which is created in much the same way as a regular observable. We can simply bind an observableArray using the foreach binding. The artist, name and genre in the data-binds are called on the current object in the foreach.

So let’s say we want to provide some edit, add and remove functionality so we can manipulate our list and albums. Actually that’s not much harder!

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
            <th></th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td><input data-bind="value: artist" /></td>
            <td><input data-bind="value: name" /></td>
            <td><input data-bind="value: genre" /></td>
            <td><button data-bind="click: $parent.remove">X</button>
        </tr>
    </tbody>
</table>
<button data-bind="click: add">Add</button>

So the click of the button in our grid is calling the remove function on our $parent object, where $parent is the container of our array. There are other such variables, such as $data (the current object) and $index (the current index).
Notice that the add button simply calls the add function, which is on our current binding context outside of the foreach loop.
Let’s look at the JavaScript for both examples.

var Album = function(artist, name, genre) {
    this.artist = ko.observable(artist);
    this.name = ko.observable(name);
    this.genre = ko.observable(genre);
}

var ViewModel = function() {
    var self = this;
 
    self.albums = ko.observableArray([
        new Album('The Beatles', "Sgt. Pepper's Lonely Hearts Club Band", 'Rock'),
        new Album('Led Zeppelin', 'Led Zeppelin III', 'Rock'),
        new Album('The Prodigy', 'The Fat Of The Land', 'Dance')
    ]);
 
    self.add = function() {
        self.albums.push(new Album());
    };
 
    self.remove = function() {
        self.albums.remove(this);
    };
};

ko.applyBindings(new ViewModel());

So first I’m simply defining the Album object. After that I’m creating a container for our array and our add and remove functionality. The first thing you’ll notice is that I’m making a reference to this by storing it in self. That’s a little weird JavaScript thing, which is nicely explained in this article: Getting Out of Binding Situations in JavaScript. Basically the remove function will not be called in the context of your ViewModel.
So after that we’re creating an observableArray (notice how it’s much the same as a regular observable). And then we have an add and remove function. We can then create a new instance and apply the bindings to our context.
You will notice that if you put both tables in your HTML (like I did) that the read-only table gets updated when you update the editable table. How awesome is that? And in your JavaScript all albums are, of course, automatically synced.

So one more thing, let’s say you can’t use a foreach binding because you don’t have a container, like a table or list. Knockout has a solution for this scenario too.

<ul>
    <li><h3>My favourite albums list!</h3></li>
    <!-- ko foreach: albums -->
        <li><span data-bind="text: name"></li>
    <!-- /ko -->
</ul>

And even that one automatically syncs when an album is changed, added or removed.

Other bindings

So you’ve now seen some of the most important features of Knockout, but there’s still much more. For example, there’s the if binding, which looks a lot like the foreach binding.

<p><input type="checkbox" data-bind="checked: showText" />(Un)check me</p>
<p data-bind="if: showText">This is the if binding.</p>
<p data-bind="visible: showText">This is the visible binding.</p>

<!-- ko if: showText -->
    <p>This is the commented if.</p>
<!-- /ko -->
var ViewModel = function() {
    this.showText = ko.observable(true);
}

ko.applyBindings(new ViewModel());

Next to the if binding there is a visible binding in there. Notice how the three act the same, but are actually different. You can check that when you press F12 in your browser and check the page’s HTML when you check and uncheck the checkbox. While the visible binding simply sets the style of the paragraph to display: none, the if binding removes the element from the DOM.

The attr binding let’s you set any attribute of an element. Here are some examples.

<p><input type="email" data-bind="attr: { placeholder: emailPlaceholder }" /></p>
<p><a data-bind="attr: { href: url, title: urlTitle, target: urlTarget }">This is a link.</a></p>
var ViewModel = function() {
    this.emailPlaceholder = ko.observable('example@contoso.com');
    this.url = ko.observable('https://sanderrossel.com');
    this.urlTitle = ko.observable("Sander's bits");
    this.urlTarget = ko.observable('__blank');
}

ko.applyBindings(new ViewModel());

The attr binding has a little weird syntax. Basically you specify attr: and then a literal JavaScript object with the attributes as properties and the fields you want to bind to as values.
In this example, since none of the values are going to change anyway, you could opt for not making the values observables, which is perfectly valid and which will show your data correct (but, of course, will not update when the values are going to change).

How about dynamically adding and removing classes to your elements? We can do this using the css binding. It looks a lot like the attr binding, except we now specify the class we want to add and the condition when it should be added (of course you should add some CSS too, if you’re using my files from GitHub you’ll see a little embedded CSS in the header).

<p data-bind="css: { cool: temperature() <= 7, moderate: temperature() > 7 && temperature() < 20, hot: temperature() >= 20 }">Temperature: <input data-bind="value: temperature" /></p>
var ViewModel = function() {
    this.temperature = ko.observable(15);
}

ko.applyBindings(new ViewModel());

You can also set your style directly using the style binding. I’ll leave that for you to figure out on your own.

Templates

So there’s one last very powerful feature I want to discuss, templates. So let’s go back to our album example. We now displayed them in a table, but what if we wanted to create regular inputs, perhaps create a little card view, instead of rows. You could use the comment style foreach, but what if you wanted this on other pages as well? You’d have to copy-paste your HTML onto the other page. Knockout has a better solution, the template binding.
So the idea is that you create some HTML which isn’t part of any page. We’re going to inject this HTML into our page, once for each album. And we can inject it on other pages too, if we want. It’s basically HTML re-use. So we can use the same JavaScript that we used in the arrays example. Here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>My favourite albums</h1>
            <div data-bind="foreach: albums">
                <div data-bind="template: { name: 'album-template', data: $data}"></div>
            </div>
        </div>
 
        <!-- This is our template -->
        <script type="text/html" id="album-template">
            <h2 data-bind="text: name"></h2>
            <p>Artist: <span data-bind="text: artist"></span><br>
            Genre: <span data-bind="text: genre"><span></p>
        </script>
        <script src="knockout-3.3.0.js"></script>
        <script src="ArraysAndForeach.js"></script>
    </body>
</html><!DOCTYPE html>

So we’re looping through our albums using the foreach binding. Then for each album we inject the template, which gets the current album as its binding context ($data). As you’ll see the template is now inserted in our page once for every album. Pretty awesome!

Well, that’s it! I hope I could make Knockout.js a little easier for you. I won’t say it’s easy, because I’ve had my share of problems with it too. Luckily it’s all worth it in the end, since Knockout can make your life a lot easier and your code a lot more concise.
I should probably mention that Knockout wasn’t created as a replacement for jQuery, or any JavaScript library for that matter, and you can use Knockout with other libraries if you like.
Knockout has more to offer, I can especially recommend that you take a look at the Mapping plugin, that can create observable objects from regular objects. Other than that the Knockout website has a pretty nice tutorial and the documentation is pretty good too, so be sure to check them out. And again I’m going to recommend a free ebook (all you have to do is sign up) from SyncFustion, Knockout.js Succinctly (I swear I don’t owe any SyncFusion stock! 🙂 ).

Happy coding!