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.checkboxes = [
            ["チェック1", m.prop(true)],
            ["チェック2", m.prop(true)],
            ["チェック3", m.prop(true)]
        ];
    },
    
    view(ctrl) {
        return m('div', [
            m('h2', '選択されているもの'),
            m('div', ctrl.checkboxes.filter(box=>{
                return box[1]();
            }).map(box=>{
                return box[0];
            }).join(', ')),
            m('h2', 'チェックボックス'),
            m('div', ctrl.checkboxes.map(box => {
                return m('label', m('input[type=checkbox]', {
                    onchange: m.withAttr('checked', box[1]),
                    checked: box[1]()
                }), box[0]);
            }))
        ]);
    }
};

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


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