Knockout JS：从 for-each 绑定下的 Table 获取文本框数据

Question

在这里使用淘汰赛js：

继续我在Knockout JS: Creating dynamic table columns的帖子

我设法以某种方式在淘汰赛中创建动态列。因此，当用户单击添加行时，它会向表中添加一行。我目前遇到的问题是如何使用表格文本框中输入的内容获取数据。比如说我有 4 列，添加一行将在表中创建 4 个文本框。当用户在那些文本框中输入数据时，我想循环并获取所有输入并保存的数据。

这是我设法创建的 jsfiddle。 https://jsfiddle.net/aman1981/L3pjhk0z/6/

我的 valuesData 在这里总是空的：

"valuesData": [
{}

我需要在小提琴中进行哪些更新才能获取所有数据。可能是json形式为

{
  "col1": "1", 
  "col2": "2"
   ....and so on depending on the columns
} 

如果您需要更多信息，请告诉我

Answer 1

您的输入字段未映射到您的值数据。

我的代码在您的某些方面有所不同。为了确保self.columnNames 的列数不超过ValuesData，我创建了一个静态对象ValuesData.columns，其中包含所有相关的列定义。只要您单击addRow，就会动态创建单个列的可观察对象。

(function() {
  var ViewModel = function() {
    var self = this;
    self.valuesData = ko.observableArray();

    self.columns = ko.computed(function() {
      if (self.valuesData().length === 0)
        return [];

      return ValuesData.columns;
    });


    self.addRow = function() {
      self.valuesData.push(new ValuesData());
    };

    self.Save = function() {
      alert('Data:')
    };

    self.removeRow = function(data) {
      self.valuesData.remove(data);
    };
  }

  // Dynamic values.
  var ValuesData = function(siid, comment) {
    var self = this;

    // Add observables dynamically for all relevant columns.
    for (var i = 0; i < ValuesData.columns.length; i++) {
      var column = ValuesData.columns[i];
      self[column.Property] = ko.observable(column.InitialValue)
    }
  };

  // Basic column definition.
  ValuesData.columns = [{
      Caption: 'SIID',
      Property: 'SIID',
      InitialValue: undefined
    },
    {
      Caption: 'Column 1',
      Property: 'Col1',
      InitialValue: undefined
    },
    {
      Caption: 'Column 2',
      Property: 'Col2',
      InitialValue: 'banana'
    },
    {
      Caption: 'Comment',
      Property: 'Comment',
      InitialValue: undefined
    }
  ]

  vm = new ViewModel()
  ko.applyBindings(vm);

  // add initial row.
  vm.addRow();


})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<br><br>
<table>
  <thead>
    <!-- NEW: use ko foreach with 'as' to have an alias for accessing $data. -->
    <tr data-bind="foreach: { data: columns, as: 'column'}">
      <th> <span data-bind="text: column.Caption"></span>
      </th>
    </tr>
  </thead>
  <tbody data-bind="foreach: { data: valuesData, as: 'rowData'}">
    <tr data-bind="foreach: { data: $parent.columns, as: 'column' }">
      <!-- NEW: bind to the corresponding property/observable in ValuesData -->
      <td><input type="text" class="form-control textbox" data-bind="textInput: rowData[column.Property]" /> </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
      </td>
    </tr>
  </tbody>
</table>

<br><br>
<div class="col-xs-12 col-sm-6">
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
  <input type="button" value="Save" class="btn btn-primary" data-bind="click: Save" />
</div>
<pre data-bind="text: ko.toJSON(valuesData, null, 2)"></pre>