Mithril 1.x component example.

account.js

import m from 'mithril';
import stream from 'mithril/stream';
import {Button} from '../../ui';
import {Account} from '../../models';

export const FormAccountPublicPage = {
    oninit(vnode) {
        this.loading = true;
        this.saving = false;
        this.errors = false;

        /**
         * Calculates if internal state matches external
         * @param form
         * @param user
         * @returns {boolean}
         */
        this.hasChanged = (form, user) => {
            return user != false && form != false &&
                (user.get('username') != form.get('username') || user.getIn(['profile', 'location']) != form.getIn(['profile', 'location']) ||
                user.getIn(['profile', 'bio']) != form.getIn(['profile', 'bio']));
        };

        /**
         * Rollback keys
         * @param user
         */
        this.reset = () => {
            return ['username', ['profile', 'location'], ['profile', 'bio']];
        };

        /**
         *
         * @param form
         * @param user
         * @param event
         */
        this.onSubmit = (form, user, event) => {
            event.preventDefault();

            if (this.hasChanged(form, user) && !this.saving) {
                this.saving = true;
                this.errors = false;

                return Account.update(form).then(u => {
                    this.saving = false;
                }, errors => {
                    this.saving = false;
                    this.errors = errors;
                });
            }
        };
    },
    view(vnode) {
        let state = vnode.state,
            user = Account.current,
            errors = state.errors,
            form = Account.form,
            changed = state.hasChanged(form, user);

        if (!user) {
            return m('placeholder');
        }

        return m('.form-group', [
            m('.row', [
                m('.col-md-4.col-lg-4', [
                    m('h3', 'Tu página'),
                    m('p', 'Este es tu perfil público. Comparte tus recomendaciones, comentarios, gustos y un poco sobre ti.')
                ]),
                m('.col-md-8.col-lg-5', [
                    errors == false ? null : m('.pt-callout.pt-intent-danger', [
                        m('h5', 'No se guardaron los cambios'),
                        m('ul..pt-list-unstyled', Object.keys(errors).map(key => {
                            return errors[key].map(err => m('li', err));
                        }))
                    ]),
                    m('form', {onsubmit: state.onSubmit.bind(state, form, user)}, [
                        m('label.pt-label', [
                            'URL de tu perfil en Comparateca',
                            m('.pt-input-group', [
                                m('button[type=button].pt-button.pt-minimal.pt-intent-primary', 'https://comparateca.com/@'),
                                m('input[type=text].pt-input', {value: form.get('username'), oninput: m.withAttr('value', x => Account.form = form.set('username', x)), style: 'padding-left: 205px'})
                            ])
                        ]),
                        m('label.pt-label', [
                            'Ubicación',
                            m('br'),
                            m('small', 'En tu página se muestra tu ubicación.'),
                            m('input[type=text].pt-input.pt-fill', {value: form.getIn(['profile', 'location']), oninput: m.withAttr('value', x => Account.form = form.setIn(['profile', 'location'], x))})
                        ]),
                        m('label.pt-label', [
                            'Biografia',
                            m('br'),
                            m('small', 'Algo breve acerca de ti.'),
                            m('textarea.pt-input.pt-fill', {value: form.getIn(['profile', 'bio']), oninput: m.withAttr('value', x => Account.form = form.setIn(['profile', 'bio'], x))})
                        ]),
                        m(Button, {intent: !changed && !state.saving ? false : 'primary', disabled: !changed && !state.saving, loading: state.saving, type: 'submit'}, 'Guardar cambios'),
                        ' ',
                        m('button[type=button].pt-button', {className: !changed ? 'hidden' : '', onclick: Account.rollback.bind(state, state.reset())}, 'Cancelar')
                    ])
                ])
            ]),
            m('hr')
        ]);
    }
}