I have a very funny problem with RactiveJS. I know this is the expected behavior, but I cannot see any solution/workaround.
Here is the code: http://jsfiddle.net/qsgatse1/2/
The problem comes from this line:
<input type='radio' name="{{a}}" value="{{false}}">false
In a few words, I have a Ractive object, referencing an array of "sub-ractive" objects. The Ractive and each SubRactive have its own template. The value contained in each SubRactive is represented in the DOM by a radio input.
The fun comes from the fact that each radio input of the subractive have the same "name" attribute if we consider the DOM point of view (so they belongs to the same "radio group"), because they have the same keypath. From the point of view of a SubRactive, the radio inputs are independent from the ones of the others SubRactives.
Is there a way to disambiguate this use case? I cannot merge the Ractive and the SubRactives into a single Ractive object, because each SubRactive has also other "SubSubRactives" (and so on) and some behaviour/observers that cannot be moved easily.
If your overall design supports it, you can wrap each set of inputs in a form tag. (see http://jsfiddle.net/mqf60w8v/)
<form>
<input type='radio' name="{{a}}" value="{{false}}">false
<input type='radio' name="{{a}}" value="{{true}}">true
</form>