KnockoutJS not reflecting changes to dependent observable objects

Question

OK, I give. I'm attempting to wire up KO for the first time in a new MVC4 project. I'm so close, but there's something just slightly off... Hopefully one of the resident Knockout geniuses is willing to swoop in and save me from my misery!

I've included the following js on my page (actual variable names differ) -

$(document).ready(function() {
    var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
    viewModel.Person.Name = ko.computed(function () {
            return this.Nickname();
    }, viewModel.Person);

    ko.applyBindings(viewModel);
});

And then further down the page I have 2 textboxes -

@Html.TextBoxFor(model => model.Person.Nickname, new { data_bind = "value: Person.Nickname" })
@Html.TextBox("Test", null, new { data_bind = "value: Person.Name" })

Person.Nickname already has a value from the MVC model. Let's say that value is "knucklehead." Person.Name does not exist in the MVC model.

On initial page load, both textboxes contain the value "knucklehead." That's a good start. However, if I change Nickname to something else, Name is NOT updated. Why?

Answer 1

And, as is typically the case... Once I posted this and came back with fresh eyes the next day, I fixed it myself. The issue was a typo. It's always something stupid, isn't it?

Thanks to everyone that took the time to read this, including RP Niemeyer!