Knockout.js 3.1.0 binding input name and id properties using $index context

Question

I'm building a cart system using Knockout.js. Currently, I'm storing the "Orders" in an observableArray called lineItems and using a knockout foreach to generate a table row with all the required form inputs.

<tbody data-bind="foreach: lineItems">
  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>
</tbody>

Everything is working just fine, however, I'd like to edit the name attribute for each form input so that each row added by knockout's foreach loop has a unique name. Specifically, I'm trying to change the ending HTML from this:

  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>
  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>

To this:

  <tr>
    <td><input data-bind="value: upc" name="Orders.0.upc"></td>
    <td><input data-bind="value: name" value="Orders.0.name"></td>
    ...
  </tr>
  <tr>
    <td><input data-bind="value: upc" name="Orders.1.upc"></td>
    <td><input data-bind="value: name" value="Orders.1.name"></td>
    ...
   </tr>

I'm really not sure how to go about this (I'm new to knockout.js). I'm thinking I need to use the attribute binding along with the $index context, but I'm not sure how to go about doing that.

Lukas.Navratil Lukas.Navratil · Accepted Answer · 2014-07-18T17:04:31

You can use attr binding...

<tbody data-bind="foreach: lineItems">
   <tr>
      <td><input data-bind="value: upc, attr: {name: 'Orders.' + $index() + '.upc'}"></td>
      <td><input data-bind="value: name, attr: {name: 'Orders.' + $index() + '.name'}"></td>
   </tr>
</tbody>

Knockout.js 3.1.0 binding input name and id properties using $index context

1 Answers