Refactoring Nerd Dinner – Adding Knockout JS

Ever wonder what Knockout JS is? Since it’s going to be a part of the default ASP.NET template in VS2012 I figured that I should take a look. AND what better project to try something new in than Nerd Dinner.

The Popular Dinners list in the Home/Index view is already using jQuery to get JSON data and dynamically building the list, this seems like the perfect candidate to refactor to use knockout.

dinners_thumb[2]

The first step in adding Knockout to NuGet (assuming that you already have the latest Nerd Dinner source) is to get the package from NuGet

knockout[9]

First, I need to add a script reference to knockout in the _Layout.cshtml

http://@Url.Content(

Next, the code in the Index.cshtml view needs to be changed from the empty container that gets dynamically populated to the use a knockout template. So I changed this line:


 
to:



Similarly, in the NerdDinner.js file _renderDinners needs to be changed to use knockout model binding. After some code cleanup _renderDinners now looks like this:
NerdDinner._renderDinners = function (dinners) {
var viewModel = {
dinners: ko.observableArray(dinners)
};
ko.applyBindings(viewModel);

NerdDinner.ClearMap();

$.each(dinners, function (i, dinner) {
var LL = new VELatLong(dinner.Latitude, dinner.Longitude, 0, null);

// Add Pin to Map
NerdDinner.LoadPin(LL, _getDinnerLinkHTML(dinner), _getDinnerDescriptionHTML(dinner), false);

// Display the event's pin-bubble on hover.
var dinnerPin = _getDinnerPin(dinner.DinnerID);
if (dinnerPin != null) {
$(dinner).hover(
function () { NerdDinner._map.ShowInfoBox(dinnerPin); },
function () { NerdDinner._map.HideInfoBox(dinnerPin); }
);
}
});

// Adjust zoom to display all the pins we just added.
if (NerdDinner._points.length > 1) {
NerdDinner._map.SetMapView(NerdDinner._points);
}
};

Next, there were some custom binders that I needed to add. One for displaying the EventDate properly and another for showing the RSVP Message. They look like this at the end of the NerdDinner.js file:
ko.bindingHandlers.dateString = {
update: function (element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor();
var allBindings = allBindingsAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
var pattern = allBindings.datePattern || 'MM/dd/yyyy';
var v1 = eval('new' + valueUnwrapped.replace(/\//g, ' '));
var v2 = v1.format(pattern);
$(element).text(v2);
}
};
ko.bindingHandlers.rsvpMessage = {
update: function (element, valueAccessor) {
var value = valueAccessor();
var rsvpMessage = " with " + value + " RSVP";
if (value > 1)
rsvpMessage += "s";
$(element).text(rsvpMessage);
}
};

Finally, This sample has just barely scratched the surface of the interesting things that knockout allows you to do. If you’re interested in learning more go the Knockout JS site. Also, the Nerd Dinner source is on Codeplex. I’d encourage you to get it, fork it, and make it better!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s