Mithriljs 不会根据数据变化更新 DOM

Question

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

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

这里描述重绘时机：

至于你的例子，问题不在于秘银，而在于事件。您需要使用 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.

这是一个 fiddle，您的代码使用 oninput：http://jsfiddle.net/ciscoheat/LuLcra77/

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

Mithriljs 不会根据数据变化更新 DOM

Mithriljs does not update DOM on change in data

mithril.js