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 TextInput = {
    /* ここは、controller() {}という書き方ではダメ
     * ES6のこの形式で作った関数はコンストラクタとして使えない
     */
    controller: function () {
        this.message1 = m.prop('hello world');
        this.message2 = m.prop('hello world');
    },
    
    view(ctrl) {
        return m('div', [
            m('h2', 'onchangeイベント'),
            m('div', `入力されたメッセージ: ${ctrl.message1()}`),
            m('input[type="text"]', {
            		onchange:  m.withAttr('value', ctrl.message1),
                value: ctrl.message1()
            }),
            m('h2', 'oninputイベント'),
            m('div', `入力されたメッセージ: ${ctrl.message2()}`),
            m('input[type="text"]', {
            		oninput:  m.withAttr('value', ctrl.message2),
                value: ctrl.message2()
            })
        ]);
    }
};

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


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