Knockout Js: Get Textbox Data From Table Under For-each Binding

Using knockout js here: Following on from my post at Knockout JS: Creating dynamic table columns I have managed to somehow create dynamic columns in knockout. So when the user clic

Solution 1:

Your input fields didn't map to your value data.

My code differs in some points of yours. To ensure, that self.columnNames does not have more columns than ValuesData I created a static object ValuesData.columns which contains all relevant column definitions. The observables for the single columns are created dynamically as soon as you click on addRow.

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

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

      returnValuesData.columns;
    });


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

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

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

  // Dynamic values.varValuesData = 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 = newViewModel()
  ko.applyBindings(vm);

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


})();

<scriptsrc="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. --><trdata-bind="foreach: { data: columns, as: 'column'}"><th><spandata-bind="text: column.Caption"></span></th></tr></thead><tbodydata-bind="foreach: { data: valuesData, as: 'rowData'}"><trdata-bind="foreach: { data: $parent.columns, as: 'column' }"><!-- NEW: bind to the corresponding property/observable in ValuesData --><td><inputtype="text"class="form-control textbox"data-bind="textInput: rowData[column.Property]" /></td></tr><tr><td><inputtype="button"value="Remove Row"data-bind="click: $parent.removeRow"class="btn btn-danger" /></td></tr></tbody></table><br><br><divclass="col-xs-12 col-sm-6"><inputtype="button"value="Add Row"class="btn btn-primary"data-bind="click: addRow" /><inputtype="button"value="Save"class="btn btn-primary"data-bind="click: Save" /></div><predata-bind="text: ko.toJSON(valuesData, null, 2)"></pre>