JSFiddle - React, Tailwind, and code Playground

by Yoshiki Shibukawa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<div id="root"/>

JavaScript

const Checkbox = {
    /* ここは、controller() {}という書き方ではダメ
     * ES6のこの形式で作った関数はコンストラクタとして使えない
     */
    controller: function () {
        this.selected = m.prop(0);
        this.labels = ["ラジオボタン1", "ラジオボタン2", "ラジオボタン3"];
    },
    
    view(ctrl) {
        return m('div', [
            m('h2', '選択されているもの'),
            m('div', ctrl.labels[ctrl.selected()]),
            m('h2', 'ラジオボタン'),
            m('div', ctrl.labels.map((label, index) => {
                return m('label', m('input[type=radio]', {
                    onchange: ctrl.selected.bind(null, index),
                    checked: (ctrl.selected() === index)
                }), label);
            }))
        ]);
    }
};

function main() {
    const root = document.querySelector("#root");
    m.mount(root, Checkbox);
}


if (document.readyState !== 'loading') {
    main();
} else {
    document.addEventListener('DOMContentLoaded', main);
}