A Single Page App with Knockout.js, ASP.NET Web API, and F#

A few weeks ago, I posted a simple example of a Single Page Application (SPA) built with Backbone.js, ASP.NET Web API, F#, C#, and more. Today, I'm posting a similar example, but built with Knockout.js. Let's look at some of the code.

View:

Knockout.js supports binding of model data directly to DOM elements, so the first thing that we will look at is one of the templates that are used for the views. Here's what this example uses for the contacts list view template:

The main thing to notice in this markup is the use of the data-bind attributes to bind specific model data to the appropriate DOM elements.

ViewModel:

The example defines a single ViewModel that is used for both of the available views. The code, which is fairly similar to that described at http://knockoutjs.com/examples/contactsEditor.html, is shown below:

Router:

Another thing to notice is the routing mechanism used in this example. Since Knockout.js doesn't provide built in URL routing, I've used Sammy.js to accommodate the need. Here's what the router looks like:

ApiController:

Lastly, we'll get a quick look at the API Controller that is written in F#. Here's the code:

That's pretty much it. You can find the full solution at https://github.com/dmohl/FsWebSpa-Knockout. CodeProject