javascript - TreeView の子を ko.observables にバインドする

Question

いくつかのアイテムをリストする基本的なツリー ビューに取り組んでおり、ユーザー入力に基づいて子アイテムのテキストを変更できるようにしたいと考えています。

見る：

<div class="treeviewUI">
 <p>
   Test Tree View Model
 </p>
 <p><strong>Enter Child One: <input data-bind="value: $parent.childOne"/></strong> <!-- also tried just childOne -->
 </p>
 <ul id='treeMenu' data-bind="foreach: menu">
  <li>
     <div data-bind="click: function() {$parent.toggle($data)}">
        <span data-bind="text: $data.text></span>
        <ul data-bind="visible: $data.expanded,
                       foreach: {data: $data.children, as 'child' }">
          <li data-bind="text:child.text"/>
        </ul>
     </div>
  </li>
 </ul>

そしてビューモデル：

define([knockout'], function (ko) {

   var childOne = ko.observable();
   var viewModel = {
     menu: [
             text: "Item 1",
                children: [
                    { text: childOne() },
                    { text: "child 1b" }
                ],
                expanded: ko.observable(false)
            },
            {
                text: "Item 2",
                children: [
                    { text: "child 2a" },
                    { text: "child 2b" }
                ],
                expanded: ko.observable(false)
            }
    ],
    toggle: function(node) {
        node.expanded(!node.expanded());
    }
};

return viewModel;

});

ただし、に入力してchildOneも、treeView サブ項目は更新されません。バインディングが見つからないのか、それとも間違ったタイプのバインディングを使用しているだけですか? それとも、ここでもっと複雑なことが起こっていますか?

JSFIDDLE リンク: http://jsfiddle.net/xQ7GS/54/