KnockoutJS - Print Iteration Index As Input Name

I am trying to create my first KnockoutJS form view in combination with Spring MVC's @ModelAttribute binding. Data is loaded over Ajax and populated with KnockoutJS Data is added

Solution 1:

You have a missing } and are probably getting an error about Knockout being unable to parse bindings.

Change:

'attr:{value: key, name:configurationHelper.configurations[$index].key'

To:

'attr:{value: key, name:configurationHelper.configurations[$index].key}'

As configurationHelper is defined outside of your foreach loop, you'll need to reference this using $parent or $root:

'attr:{value: key, name:$parent.configurationHelper.configurations[$index].key}'

Solution 2:

Answer :

Add quotes to "non-Knockout" elements and use $index() function.

<tbody data-bind="foreach: configurations">
    <tr>
        <td>
            <input data-bind='attr:{value: key, name:"configurations["+$index()+"].key"}' class="form-control input-sm" type="text"/>
        </td>

     </tr>
 </tbody>