Binding observableArray中单个对象的双向绑定

我的网页如下：

<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>

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不会更新，反之亦然

要怎么做才能做到这一点

---

Fiddle:

您的输入没有更新，因为

id

和

name

值没有被存储或绑定到

可观察对象

，后者是knockout专门为此目的提供的特殊对象。您可以通过添加新的

Student

类型轻松解决此问题：

function Student(data) {
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
};

并使用它填充

学生

数组：

$.each(students, function (idx, student) {
     if (window.console) console.log(student);
     model.students.push(new Student(student));
 });

由于这些属性现在是可观察的，它们的更改将传播到UI。这里是，与这两个小的变化

尽管如此，我认为你基本上错过了淘汰赛的要点。如果你还没有这样做的话，我强烈建议你通过考试

使用jQuery为viewmodel创建

click

函数实际上与Knockout鼓励的模型背道而驰。请看一看，它使用viewmodel函数将代码转换为100%敲除，并删除所有jQuery