binding - observableArray 内の単一オブジェクトの双方向バインディング

Question

マイページは以下の通りです。

<button id="add">Add Data</button>
<button id="show">show</button>
<table>
    <tr style="vertical-align:top">
        <td>
            <table border="1">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: students">
                    <tr>
                        <td data-bind="text: id"></td>
                        <td>
                            <input type="text" data-bind="value: name" />
                        </td>
                        <td> <a href="javascript:void(0)" data-bind="click: $root.showData">Select</a>

                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td>
            <table id="data">
                <tbody data-bind="with: selectedData">
                    <tr>
                        <td>Id</td>
                        <td>
                            <input type="text" data-bind="value: id" />
                        </td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>
                            <input type="text" data-bind="value: name" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="Close" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

JavaScript は次のとおりです。

function ViewModel() {
    var self = this;
    self.students = ko.observableArray([]);
    self.showData = function (dt) {
        if (window.console) console.log(dt);
        self.selectedData(dt);
        $('#data').show();
    }
    this.selectedData = ko.observable();
}
$(function () {
    window.appViewModel = new ViewModel();
    ko.applyBindings(window.appViewModel);
    $('#add').click(function () {
        var model = window.appViewModel;
        $.each(students, function (idx, student) {
            if (window.console) console.log(student);
            model.students.push(student);
        });
        $('table').show();
    });
    $('table').hide();
    $('input').click(function () {
        $('#data').hide();
    });
    $('#show').click(function () {
        var s = JSON.stringify(window.appViewModel.students());
        alert(s);
    });
});

プレビュー:

写真では、id = 3 の学生に対応する選択をクリックします。選択した学生の詳細が表示された別のテーブルが表示されます。テキストボックス 1 に何かを入力すると、テキストボックス 2 は更新されず、その逆も同様です。

それを実現するために何をすべきか？

フィドル: http://jsfiddle.net/deostroll/YdrQf/1/