Question

Concider a jQuery Mobile “list” containing a radio button and a label for it.

<!-- ko foreach: $data.answers -->
<input type="radio" name="radio-choice" data-bind="attr: { id: [...] }" />
<label data-bind="attr:{ for: [...] }">Label</label>
<!-- /ko -->

In order to work, the for attribute of the label needs to be the same as the id of the input.

REPLACEMENT FOR [...]            RESULTS IN
$index                           ok
'radio-nr-'+$index               fails
$root.testFunction(1)            ok
$root.testFunction($index)       fails
'radio-nr-'.concat(1)            ok
'radio-nr-'.concat($index)       fails

where

function testFunction(a) {  return "radio-nr-"+a; };

Why do all my attempts of concatenating the $index fail?

Thanks!

Answer 1

From the $index documentation:

Unlike the other binding context properties, $index is an observable

So you need to write $index() (note the parenthesis) in your binding:

<!-- ko foreach: $data.answers -->
<input type="radio" name="radio-choice" 
                    data-bind="attr: { id: 'radio-nr-' + $index()  }" />
<label data-bind="attr:{ for: 'radio-nr-' + $index() }">Label</label>
<!-- /ko -->

A working sample in JSFiddle