Can't set knockout binding within foreach in view

Question

I'm new to knockout and trying to figure something out. I'm trying to get a textbox within a foreach on my view to be bound to an observable array but had no luck. No problem outwith my foreach but doesn't work within.

I have a simple textbox on a view with a matching observable in my js. This textbox and observable are perfectly bound and always gets updated as soon as the textbox value changes.

I also have a table with a foreach and within the foreach another textbox. This is bound slightly differently as it's bound to an array where every iteration represents each row of the table.

On the textboxes within the foreach, I'm having trouble with the binding. Updating any of these textboxes doesn't seem to update the observable array.

This is my working textbox and binding.

<input data-bind="value: testText" />

self.testText = ko.observable("aaa");

With the above, console.log(self.testText()); always shows whatever is in the textbox

Here is my non-working textbox within foreach

<tbody data-bind="foreach: Tasks">
    <tr class="taskItem">
        <td><input type="text" data-bind="textInput: $data.Desc()" /></td>
    </tr>
</tbody>

binding:

self.Tasks = ko.observableArray([]);

now console.log(self.Tasks()[0].Desc()); does not reflect what is in the textbox at [0] position on the table. I guess this textbox is not bound to the observable array correctly, but unsure why.

I would expect console.log(self.Tasks()[0].Desc()); to show the value of whatever is in the textbox at position [0] on my foreach table.

Any help at all is greatly appreciated. Cheers

adiga adiga · Accepted Answer · 2019-08-12T17:52:18

You need to remove the () from data-bind. Inside textInput binding handler, knockout checks if the expression bound is an observable or not. Since you have Desc() it evaluates to a static initial value. Hence, any update to the input will not update it back to the view model's property.

(Also, you can remove the $data from the binding)

function Task() {
  this.Desc = ko.observable();
  this.Desc.subscribe(console.log);
}

function viewModel() {
  this.Tasks = ko.observableArray([new Task]);
}

ko.applyBindings(new viewModel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<table>
  <tbody data-bind="foreach: Tasks">
    <tr class="taskItem">
      <td><input type="text" data-bind="textInput: Desc" /></td>
    </tr>
  </tbody>
</table>

Can't set knockout binding within foreach in view

1 Answers