# REMEMBER: follow along with these examples by cloning the# repository and checking out the tag for each step$ git clone https://github.com/mheggeseth/ThatSessions.git
$ git checkout -f [tag-name-for-step]
Last time, we used jQuery, JSONP, and OData to load a list of conference sessions into some HTML Bootstrap boilerplate. We got loading to work, but our page isn’t very pretty or useful yet so we’re going to fix that (at least part way).
First, we defined a viewModel object containing a single observableArray to be a container for our sessions. Then we set the sessions observable to the array of sessions returned by the AJAX request.
Let’s update our HTML using Knockout’s data-bind attribute to bind our session list to the page.
The foreach: sessions binding tells Knockout to repeat the element’s inner HTML for each object in the sessions array. The binding context of the inner HTML of <ul data-bind="foreach: sessions"> then becomes the current element of sessions. So <li data-bind="text: Title"></li> will add a list item for each session whose value is the Title property of the session.
Notice that we added another element in there: <span data-bind="visible: !sessions().length">Loading sessions...</span>. Knockout’s visible binding shows the current element if its value is truthy and hides it when its value is falsey. This allows us to easily provide a friendly loading message before sessions are loaded and then take it away once we’ve loaded at least one session.
//find KO binding declarations and associate them with target viewModel membersko.applyBindings(viewModel);
So this is all fine and good, but you’ve probably noticed that with the exception of the loading indicator, we haven’t changed the look and feel of our page at all. However, the addition of Knockout to manage data and its application to the DOM should pay big dividends in the future. For one, because sessions is not just any array but an observable array, if we added or removed a session, Knockout would automatically update the view: a task that would have required significantly more code with our previous jQuery setup.
For reference, here’s the diff for our latest set of changes to index.html.
So now that we have the beginnings of an application, let’s use Bootstrap to make it look a little bit nicer. First, we’ll give the navigation bar fixed layout so that it stays at the top of the screen as we scroll. This is as easy as adding the navbar-fixed-top style to the navbar tag. Bootstrap requires us to add 70px of padding to the top of the body tag to facilitate the fixed navbar behavior so we’ll do that too.
So now that we have a session list that’s marginally pretty and functional, we should probably make it useful too. Next time, we’ll organize the sessions in a relevant way and make it easy to track favorites.