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/

Answer 1

您的输入没有更新，因为idandname值没有被存储或绑定observables，这是 knockout 专门为此目的提供的特殊对象。您可以通过添加新Student类型轻松地使用代码解决此问题：

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

并使用它来填充您的students数组：

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

现在有了这些属性observables，它们的更改将传播到 UI。这是fiddle，有这两个小改动。

话虽如此，我认为您在很大程度上错过了淘汰赛的重点。我强烈建议您阅读Knockout 教程，如果您还没有这样做的话。

您使用 jQueryclick为您的视图模型创建函数确实违背了 Knockout 鼓励的模型。请看一下这个 fiddle，它使用 viewmodel 函数将您的代码转换为 100% Knockout，并删除所有 jQuery。