Knockout.js ObservableArray を部分的に更新

数時間ハマったのでメモ。
observableArray で複雑なオブジェクトを含む配列を渡した時、
オブジェクトのプロパティを部分的に更新する。

html

<!-- ko foreach: myItems -->
    <li>アイテム <span data-bind="text: $data.value"></span></li>
<!-- /ko -->

javascript

var items = [
        {value: 'a'},
        {value: 'b'},
        {value: 'c'}
    ];

var bindObj = {
        myItems: ko.observableArray(items)
    };

ko.applyBindings(bindObj);

var ob = bindObj.myItems;
var idx = 1;

// 新しいオブジェクトだと更新される
// ob.splice(idx, 1, {value: 'b updated'});

var b = items[idx];

b.value = 'b updated';

// 同じオブジェクトだと更新されない
// ob.splice(idx, 1, b);

// しかたないからディープコピー
ob.splice(idx, 1, $.extend(true, {}, b));

同じオブジェクトのプロパティを書き換えて splice しても、値が更新されなかった。
しかたないので、ディープコピーしてから更新。
コピーには今回 jQuery.extend を使用。