UK/Europe Day 2

Today my friend Chase and I walked around and explored Paris a little bit. We started our day with a couple of Croque Monsieurs and a Pain au Chocolat before departing to walk up the river “La Seine” starting at the Eiffel Tower and finishing at the Notre Dame Cathedral.

Location History

Screenshot 2014-12-15 17.31.49

Inside Notre Dame de Paris (Photo Sphere)

Cour Carrée at the Musée du Louvre (Photo Sphere)

Taken at the Pont Alexandre III bridge (Photo Sphere)

Tomorrow we pick up our rental car and drive further into Europe – Zurich, Switzerland

UK/Europe Day 1

2014-12-13 16.12.53

I start my journey back to the UK for 2 weeks today. I packed my bags, I parted ways with my other half Adriann at the terminal, now I’m sitting in the United lounge at LAX having a glass of wine, reading random rubbish on the internet and planning what I’m going to do for the next 11 hours.

So far I’m thinking I’ll get some work done; I’ll try writing Blackjack in a C# console application; I’ll probably watch some Big Bang Theory and I’ll do it all in parallel with a glass of wine on my tray table.

Howto: Use Knockout Mapping to augment models fetched via AJAX. (Part 1)

When building web applications in KnockoutJS, one of the ways I like to get a view model up and going that is based on data from a back end server is to use Knockout Mapping.

For example, if I want to display a list of Products on a page – I might write a function that fetches JSON data from an MVC Controller like so:

var vm = null;

var fetch = function() {
    $.getJSON('/getproducts', function(data) {
        vm = ko.mapping.fromJS(data);

        ko.applyBindings(vm);
    });
}

This populates my vm variable using Knockout Mapping which I can use later in code, then binds the VM to the View using ko.applyBindings.

But let’s say in this theoretical application that I want to have a Boolean flag available for each Product that returns true if the Product has a price over $50 and is on special. I want this variable to be called showSpecialFlag, and I want to use this variable to affect my view in certain ways.

I could definitely create this value on the back end, but in the interest of separating concerns between my view and my model – I want to do this in my KnockoutJS view model. How can I do this when my data goes through the black box that is ko.mapping.fromJS?

The way that I like to do this is to have a model present in my Javascript like so:

var productModel = function(options) {
    ko.mapping.fromJS(options.data, {}, this);
    
    this.showSpecialFlag = ko.computed(function() {
       return this.price() > 50 && this.isOnSpecial();
    }, this);
};

var vm = null;

var fetch = function () {
    $.getJSON('/getproducts', function (data) {
        vm = ko.mapping.fromJS(data, {
            'products': function(options) {
                return new productModel(options);
            }
        });
        
        ko.applyBindings(vm);
    }
}

Now, when I make my call to ko.mapping.fromJS, I pass in a mapping configuration object that tells ko.mapping.fromJS what to do when it comes across the products array. My productModel function then augments additional functionality for each product item that will be eventually bound to a view.

This is a simple example. There is a lot more you can do with augmentation that I’d like to write about. The basics are covered on Knockout’s documentation site, but I have a few more advanced scenarios I’d like to write about that aren’t really mentioned in their documentation. The main one I figured out recently was how to reference parent objects of the model being created.