1 2 3 4
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).
git checkout -f knockoutjs
Obviously, we’ll add the KnockoutJS library.
1 2 3 4 5 6 7 8 9 10 11
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.
1 2 3 4 5 6
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
<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.
We forgot to do one thing, probably the most important thing. We need to tell Knockout to apply the bindings in the HTML to a view model. We add a call to
data-bind attributes we added to the markup are about as useless as a white crayon.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
Bootstrap Window Dressing
git checkout -f bootstrap-style
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.
1 2 3 4 5 6 7 8 9 10 11
Now, let’s add some style to our list. First, we’ll give our loading indicator a little flare by adding the alert style (in a non-threatening way).
Then we’ll turn our list into a list group and use labels to highlight some useful information about the session like scheduled time (with a little help from Moment.js), location, category, and level.
1 2 3 4 5 6 7
Here are all the changes we just made:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
Next Time: Making it Useful
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.