Correct use of radio buttons?

[rkottmann]

Although not popular, I have to shocase that radio buttons are possible with fore.
Indeed it is possible. I have come up with the following solution, but I am not sure, if it is a good solution.

---
layout: base-fore
---
<h1>Fore and Radio Buttons</h1>

<fx-fore>
    <fx-model>
        <fx-instance>
            <root>
                <greeting>first</greeting>
            </root>
        </fx-instance>
    </fx-model>
    <fx-message event="change">change triggered value={/root/greeting}</fx-message>
    <fieldset>
        <!-- Why does ref not work here, but only in fx-setvalue  ?  -->
        <fx-control ref="greeting">
            <input type="radio" id="first" name="radio-input" />
            <!--Why is a full xpath with root element needed and outside or ref attribute control not ?-->
            <label for="first">first radio (hello from {/root/greeting}) {greeting}</label>
            <fx-setvalue event="change">first</fx-setvalue>
        </fx-control>
        <fx-control>
            <input type="radio" id="second" name="radio-input" />
            <label for="second">second radio</label>
            <fx-setvalue ref="greeting" event="change">second</fx-setvalue>
        </fx-control>
        <fx-control>
            <input type="radio" id="third" name="radio-input" />
            <label for="second">third radio</label>
            <fx-setvalue ref="greeting" event="change">third</fx-setvalue>
        </fx-control>
    </fieldset>
    <p>output from template expression without /root: {greeting}</p>
    <p>output from template expression with /root: {/root/greeting}</p>
    <p>output from fx-output:<fx-output ref="greeting"></fx-output></p>
    <fx-inspector open></fx-inspector>

</fx-fore>

I have some more questions in the html comments above where I would appreciate your feedback/answers.

thx in advance. Overall nice and easy to use.

[JoernT]

Sorry - this slipped through - we'll prepare a demo for radios.

[JoernT]

@rkottmann i prepared a demo for the handling of radiobuttons. It's a bit simpler than your approach:

          <fx-control ref="radio">
            <label>Choose a radio</label>
            <fx-items>
              <input type="radio" id="first" name="radio-input" value="first" />
              <label for="first">first radio</label>

              <input type="radio" id="second" name="radio-input" value="second"/>
              <label for="second">second radio</label>

              <input type="radio" id="third" name="radio-input" value="third" />
              <label for="third">third radio</label>
            </fx-items>
            <fx-message event="value-changed">changed to {.}</fx-message>
          </fx-control>

If the radio buttons need to be dynamic (being build from data) then you can use fx-items with ref and template. See demos/i18n2.html.

Please note, that this will work only with latest 'dev' branch for now. Will go into next release.