双向中observableArray单个对象的结合 [英] two-way binding of a single object in 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>

的JavaScript如下：

The javascript is as follows:

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);
    });
});

preVIEW：

Preview:

在知情同意，我就选择对应于学生使用id = 3.单击其他表显示与所选学生的详细信息。假设我在文本框中输入1东西，文本框2不更新，反之亦然。

In pic, I click on the select corresponding to student with id = 3. The other table shows up with the selected student details. Suppose I enter something in textbox 1, textbox 2 doesn't update, and vice versa.

怎样做才能做到这一点？

What to do to make that happen?

小提琴： http://jsfiddle.net/deostroll/YdrQf/1/

推荐答案

您输入没有更新，因为 ID 和名称值不被存储或约束对观测，这是特殊的对象淘汰赛为此具体规定。您可以轻松地通过添加解决这个与code一个新的学生键入

Your inputs aren't updating because the id and name values are not being stored or bound against observables, which are the special object that knockout provides specifically for this purpose. You can easily solve this with your code by adding a new Student type:

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));
 });

使用这些属性现在正在观测，他们的更改将传播到用户界面。这里是小提琴，与这两个小的改动。

With those properties now being observables, their changes will propagate to the UI. Here is the fiddle, with these two minor changes.

话虽这么说，我想你已经错过了大部分的淘汰赛点。我强烈建议你去通过淘汰赛教程的，如果你还没有这样做。

That being said, I think you have largely missed the point of Knockout. I strongly suggest you go through the Knockout tutorials, if you haven't done so already.

您是使用jQuery的创建点击功能视图模型您真的违背了淘汰赛鼓励模型。请看看这个小提琴，你的code转换成100％的淘汰赛，使用视图模型功能，并删除所有的jQuery的。

You're use of jQuery to create click functions for your viewmodel really goes against the model that Knockout encourages. Please take a look at this fiddle, which converts your code into 100% Knockout, using viewmodel functions, and drops all the jQuery.

这篇关于双向中observableArray单个对象的结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！