Knockout binding doesn't update using array of simple observables

by Brian Dukes

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: $data" /><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 ko.observable(title);
    }));
    self.addTitle = function() {
        self.titles.push(ko.observable(''));
    };
    self.removeTitle = function(title) {
        self.titles.remove(title);
    };

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