在第一个动作停止秘银重绘

Question

我正在使用秘银编写单页应用程序。该页面在主要组件的oninit中使用m.request()从服务器加载一些数据：

var root = document.getElementById("main");
var Data = {
        fetch: function () {
            m.request({
                method: "GET",
                url: "/api/read"
            })
                .then(function (items) {
                    // init models with data
                });
    }
}

var Home = {
    oninit: Data.fetch,
    view: function (vnode) {
        return m("div", [components]);
    }
}

m.route(root,
    "/",
    {
        "/": Home
    });

数据量很大 json，该页面是为了帮助编辑 json，确保满足某些外键约束，并更好地可视化。一切都按预期工作，直到调用一个组件，该组件实际上将一个全新的条目添加到我拥有的任何 json 对象中。在此阶段，页面重新加载，数据再次获取，所以我丢失了所有更改。它只发生过一次，而且只发生在这个电话上：

jsonModel[propertyName].push(JSON.parse(newObject))

第一次重绘后，我可以随意修改页面，不会再出现此问题。我什至可以在没有发生的情况下刷新。

我是不是在结构上做错了什么？可以阻止此刷新吗？

Answer 1

我发现了问题，但实际错误并未包含在问题中：触发操作的组件是一个按钮。这个按钮被放置在一个表单标签中，出于某种原因只触发了一次提交。 Here's the code 会重现问题。

有趣的是，在 Edge 中尝试时，它几乎总是刷新。如果有人知道，我仍然想知道为什么它只在 Chrome 上执行一次？

Answer 2

听起来您想在 onclick 处理程序中为 <button> 调用 event.preventDefault()，以防止它自动提交表单。

您可以采用其他几种方法，但这是最简单的方法。

在第一个动作停止秘银重绘

stop mithrill redraw on first action

mithril.js