从选定的表行Knockout.js中获取值

Question

我需要一些帮助.

我创建了一个从JSON响应中获取值的表,但是对于这个示例,我们创建一个硬编码的html表,如下所示:

<table id="devtable">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Jhon</td>
        <td>Single</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Mike</td>
        <td>Married</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Marrie</td>
        <td>Complicated</td>
    </tr>
</table>
ID : <input type="text" name="ID" data-bind="value: ID" disabled/>
<br>
Name : <input type="text" name="Name" data-bind="value: Name" disabled/>
<br>
Status : <input type="text" name="Status" data-bind="value: Status" disabled/>
<br>
<input type="button" value="Send" disabled/>

要求是:当我选择一行表时,列的值也会转到输入框和启用按钮.当我试图通过这个练习学习Knockout.js.我想我必须创建一个这样的viewmodel:

var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
}

项目链接在这里:http://jsfiddle.net/qWmat/

Answer 1

这是一个如何做到这一点的例子:

http://jsfiddle.net/qWmat/3/

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));

    self.select = function(item) {
        self.selected(item);
    }; 

    self.selected = ko.observable(self.items()[0]);
} 

然后将文本框绑定到属性中的selected属性:

<input type="text" name="ID" data-bind="value: selected().ID" disabled/>

然后绑定你tr喜欢的点击处理程序:

<tr data-bind="click: $parent.select">

更新为包括启用绑定(http://jsfiddle.net/qWmat/8/).添加是否编辑的属性:

self.enableEdit = ko.observable(false);

然后更新您的select函数以将其设置为true:

self.select = function(item) {
    self.selected(item);
    self.enableEdit(true);
};

如果/当您保存或取消时,可以根据需要将其设置为假.

更新输入框上的绑定:

<input type="text" name="Status" data-bind="value: selected().Status, enable: enableEdit" />