Knockout binding doesn't update using array of simple observables

http://stackoverflow.com/questions/10621008/knockout-binding-doesnt-update-using-array-of-simple-observables

by rniemeyer

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<ul data-bind="foreach: titles">
    <li><input data-bind="value: val" /><button data-bind="click: $root.removeTitle">Remove</button></li>
</ul>
<button data-bind="click: addTitle">Add</button>

<div data-bind="text: titlesJson"></div>
<div data-bind="text: titlesJson2"></div>

JavaScript

var TitleList = function(titles) {
    var self = this;
    self.titles = ko.observableArray($.map(titles, function(title) {
        return { val: ko.observable(title) };
    }));
    self.addTitle = function() {
                 self.titles.push({ val: ko.observable('') });
    };
    self.removeTitle = function(title) {
        self.titles.remove(title);
    };

    self.titlesJson = ko.computed(function() {
        return ko.toJSON(self.titles);
    });
    
    self.titlesJson2 = ko.computed(function() {
        return JSON.stringify($.map(self.titles(), function (title) { return title.val(); }));
    });
};
ko.applyBindings(new TitleList(['Duke', 'Duchess']));