A common scenario with Javascript is toggling a set of elements based on the selected element add applying, removing css classes. You’ll see this on menu items, etc… and in my case where we want to have styled ‘button’s instead of a radio list.

An example of this might be handling the selection of the button and then applying a class and removing any other classes, for example:

That is it. No more function required in the viewmodel. To understand what happens here is to understand the $parent.year click event. Basically in KnockoutJs 2.0 by default $parent.year takes the $data property as a parameter. The year binding is set, which in turn triggers the css selection on all the items reevaluating if it should have that CSS appended.

There are certainly plenty of articles, examples, etc… around creating the ‘Todos’ sample. To learn more about different frameworks and a more complete example, check out Addy Osmani‘s examples here: http://addyosmani.github.com/todomvc/ This is a fantastic resource to learn about different available frameworks.

Most of these examples tend to use the localStorage. Not that it’s a big deal, but I wanted to put together something very very simple that showed some connections between using Backbone.js to make calls to a backend server. In this case, I have decided to use asp.net mvc.

The example uses IISExpress to be hosted. To reduce some of the friction, there is no database, just a static List object on the server. I am not handling edits in this simple example – just a GET call to show todos and POST call to add a new todo.

First, this is not a ‘how to use backbone’ nor a ‘how to use asp.net mvc’ – I’d probably fail you on both subject matters! The goal here is to highlight the aspects of backbone that help in making the connection to the backend server. Backbone is providing an abstraction over the ajax calls. You certainly CAN use ajax directly if you want.

So, let’s get started. The ‘todo’ model is quite simple – see todo.js line 5 :

Returns the relative URL where the model’s resource would be located on the server. If your models are located somewhere else, override this method with the correct logic. Generates URLs of the form: "/[collection.url]/[id]", falling back to "/[urlRoot]/id" if the model is not part of a collection.

This is a basic post regarding namespacing and revealing module pattern. When starting a new JavaScript application it’s important to have a good starting foundation. First let’s show how to use namespacing in JavaScript:

window._ns = window._ns || {};

_ns is attached to the global window object. Alex MacCaw in his book ‘’JavaScript Web Applications’ describes this well:

We’re setting on the window object to ensure that it’s globally accessible.

Also, by using this pattern, it’s easy to see which global variables a script is declaring,

just look through the script for window references

Let’s show this in use, first using what is referred to as the singleton pattern:

Edit: As mentioned in the comments, an easier alternative to what I show below is to directly use the XDocument.Parse call, ie.

XDocument = XDocument.Parse(xmlString);

Just recently I had one of those tasks where you are given a string that is xml. In this case it was xml from a WebClient call asynchronously. So the result coming back was a string.

There are several classes that work well to do this task, and each is probably a topic of it’s own. Personally, Linq in all it’s flavors is one of my favorite things about the C# language. Take for example the XDocument class- it allows us to use XPath style queries using a Linq syntax.

When you look at XDocument, you’ll notice it has the XDocument.Load() function with it’s various overloads. One option is a string, however, this is a path to an xml file. That leaves us with Streams, TextReader, XmlReader, etc…

So, we have a string, that is xml, we want to load it into a XDocument that takes a XDocument.Load(Stream).

I’ve decided to use a MemoryStream, as a MemoryStream will create a stream that is in memory vs. on disk, etc… What we find out though, is our MemoryStream is expecting an array of bytes!

In order to get our string into an array of bytes, we will need to use the C# Encoding class. There are many different of encoding, which you can check out in the Encoding class. In this case, I’m going to use UTF8Encoding. If your new to Encoding, or want to learn more, I suggest reading the MSDN topic ‘Character Encoding in the .NET Framework’.

So our Encoding.UTF8.GetBytes(string) will take our xml string and produce our byte array for the MemoryStream – we’ll take that stream and give it to our XDocument.Load to populate our XDocument object.