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\nworld');
        this.message2 = m.prop('hello\nworld');
    },
    
    view(ctrl) {
        return m('div', [
            m('h2', 'onchangeイベント'),
            m('div', `入力されたメッセージ: ${ctrl.message1()}`),
            m('textarea', {
            		onchange:  m.withAttr('value', ctrl.message1)
            }, ctrl.message1()),
            m('h2', 'oninputイベント'),
            m('div', `入力されたメッセージ: ${ctrl.message2()}`),
            m('textarea', {
            		oninput:  m.withAttr('value', ctrl.message2)
            }, ctrl.message2())
        ]);
    }
};

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


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