Knockout JS技术问题：如何获取foreach绑定表格中文本框的数据

嘿，这个问题其实刚好戳中Knockout MVVM的核心——永远优先通过数据模型获取值，而不是直接扒DOM！我给你捋个清晰的方案，亲测好用：

核心思路 #

既然你已经用foreach实现了动态行，那只需要把每个文本框和ViewModel里的**可观察属性（observable）**做双向绑定，之后直接从ViewModel的数组里拿数据就行，完全不用手动去DOM里捞值。

具体实现步骤 #

1. 定义行数据的子ViewModel #

先给每一行的数据建一个子模型，里面的每个属性对应表格的一列，全部用ko.observable()定义，这样就能和文本框双向绑定：

function RowItem() {
    // 这里的属性要和你的表格列一一对应，比如4列就定义4个
    this.col1 = ko.observable('');
    this.col2 = ko.observable('');
    this.col3 = ko.observable('');
    this.col4 = ko.observable('');
}

如果你的列也是动态生成的（比如从columns数组来），可以改成动态创建属性：

function RowItem(columns) {
    var self = this;
    columns.forEach(function(col) {
        self[col.fieldName] = ko.observable('');
    });
}

2. 主ViewModel管理所有行数据 #

主ViewModel里用ko.observableArray()来存所有行，再写一个添加行的方法和获取数据的方法：

function TableViewModel() {
    var self = this;
    
    // 存储所有行数据，初始化默认一行
    self.rows = ko.observableArray([new RowItem()]);
    
    // 你已实现的添加行逻辑可以直接复用
    self.addRow = function() {
        self.rows.push(new RowItem());
    };
    
    // 获取所有用户输入数据的核心方法
    self.getAllInputData = function() {
        // 遍历rows数组，把每个observable的值取出来（记得加()）
        var inputData = self.rows().map(function(row) {
            return {
                col1: row.col1(),
                col2: row.col2(),
                col3: row.col3(),
                col4: row.col4()
            };
        });
        // 这里可以打印、提交或者做任何你需要的处理
        console.log('所有输入数据:', inputData);
        return inputData;
    };
}

// 激活ViewModel
ko.applyBindings(new TableViewModel());

3. HTML绑定部分 #

把表格的行绑定到rows数组，每个文本框用value绑定到对应属性：

<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>列4</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr>
            <td><input type="text" data-bind="value: col1"></td>
            <td><input type="text" data-bind="value: col2"></td>
            <td><input type="text" data-bind="value: col3"></td>
            <td><input type="text" data-bind="value: col4"></td>
        </tr>
    </tbody>
</table>

<button data-bind="click: addRow">添加行</button>
<button data-bind="click: getAllInputData">获取所有输入</button>

如果是动态列（比如主ViewModel里有columns数组存列配置），HTML可以改成这样：

<thead>
    <tr data-bind="foreach: columns">
        <th data-bind="text: displayName"></th>
    </tr>
</thead>
<tbody data-bind="foreach: rows">
    <tr data-bind="foreach: $parent.columns">
        <td><input type="text" data-bind="value: $parent[$data.fieldName]"></td>
    </tr>
</tbody>

为什么不直接操作DOM？ #

Knockout的设计就是数据驱动视图，如果直接用jQuery或者原生JS去捞文本框的值，不仅麻烦，还容易出现「视图和数据不同步」的问题——比如用户输入后，ViewModel里的数据没更新，或者反过来。用双向绑定的话，用户输入的瞬间，ViewModel里的observable就自动更新了，取数据的时候直接拿模型里的就行，稳得一批。

内容的提问来源于stack exchange，提问作者aman