CODEWITHSUNDEEP
mithril.js
learner010
learner010

Reputation: 439

Mithriljs does not update DOM on change in data

I read somewhere, the DOM is updated every time an event occurs and there is changes in data which are bound to DOM. So I wished to learn more about it. I tried the code below but the DOM is not updated when data in textarea changes but its updated whenever I click or press tab key.

var app = {
    controller: function () {
        var self = this;
        this.model = {};
        this.model.errors = [];
        this.break_data = function (value) {
            self.model.errors = value.split(' ');
            m.redraw();
        }
    },
    view: function (ctrl) {
        return m('.content', [
            m('textarea', {onchange: m.withAttr('value', ctrl.break_data)}),
            ctrl.model.errors.map(function (error) {
                return m('.error', error);
            })
        ]);
    }
}

m.mount(document.getElementById('app'), app);

I even tried m.startComputaion(), m.stopComputation() and m.redraw() non of them works.

Upvotes: 2

Views: 2518

Answers (1)

ciscoheat
ciscoheat

Reputation: 3947

The redrawing timing is described here: https://stackoverflow.com/a/30728976/70894

As for your example, the problem is not Mithril but the event. You need to use oninput instead of onchange to look for immediate changes. As the Mozilla docs for the "change" event states:

The change event is fired for input, select, and textarea elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

Here's a fiddle with your code that uses oninput: http://jsfiddle.net/ciscoheat/LuLcra77/

Note that you don't need m.redraw in the event handler anymore now when the correct event is used, since Mithril redraws automatically after every event defined in a call to m().

Upvotes: 4

Related Questions