javascript - ノックアウトjsチェックボックスチェック済みバインディング

Question

ノックアウト js では、データの配列に対して foreach を実行して、チェック ボックスを表示しようとしています。私が抱えている問題は、ボックスの 1 つを操作するまで、チェックされたデータバインドが実行されていないように見えることです。たとえば、以下では 5 つのテキスト ボックスを生成していますが、いずれもチェック済みとして表示されていません。ただし、「1」、「2」、「4」をクリックすると、最初からチェックされているはずです。

Javascript:

var viewModel = {};

viewModel.choices = ["one", "two", "three", "four", "five"];
viewModel.selectedChoices = ko.observableArray(["two", "four"]);

viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
        return viewModel.selectedChoices().join(",");
    });

ko.applyBindings(viewModel);

HTML:

<ul class="options" data-bind="foreach: choices">
    <li><label><input type="checkbox" name="NotifyMembers" data-bind="checked: $parent.selectedChoices, attr: { value: $data }" /><span data-bind="text: $data"></span></label></li>
</ul>
<hr />
<div data-bind="text: selectedChoicesDelimited"></div>

フィドルはhttp://jsfiddle.net/bvGG3/1/にあります。

ご協力いただきありがとうございます。