mithril.js - Mithriljs 不会在数据更改时更新 DOM

Question

我在某处读到，每次事件发生时 DOM 都会更新，并且绑定(bind)到 DOM 的数据也会发生变化。所以我想更多地了解它。我尝试了下面的代码，但是当 textarea 中的数据发生更改时，DOM 不会更新，但每当我单击或按 Tab 键时，DOM 就会更新。

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);

我什至尝试了m.startComputaion()、m.stopComputation()和m.redraw()，但它们都不起作用。

Answer 1

重绘时序描述如下:https://stackoverflow.com/a/30728976/70894

就你的例子而言，问题不在于 Mithril ，而在于事件。您需要使用 oninput 而不是 onchange 来查找即时更改。作为Mozilla docs for the "change" event状态:

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.

这是使用 oninput 的代码:http://jsfiddle.net/ciscoheat/LuLcra77/

请注意，当使用正确的事件时，您现在不再需要在事件处理程序中使用 m.redraw ，因为 Mithril 会在调用 m( 中定义的每个事件后自动重绘) )。