javascript - Mithril : prevent full application reload on submit

Question

我有一个组件，它只是一个登录表单。当登录不成功时，由于某种原因，我会重新加载完整的应用程序。

这是应用程序的主条目。它所做的只是初始身份验证 ping。如果 session 启动，它会加载实际的应用程序，否则它会安装身份验证组件，该组件只是一个登录表单。

var Application = {
  run() {
    m.request({
      method: "GET",
      url: cfg.apiurl("/session/ping"),
      extract(xhr) {
        return xhr.status > 200 ? xhr.status : xhr.responseText;
      }
    }).then(r => {
      var init = {
        uname: r.data.uname
      };
      router(init);
    }, e => {
      if (e === 401) {
        m.mount(document.body, Authenticate);
      }
    });
  }
};

Application.run();

下面是去掉 View 的身份验证组件。它将登录变量绑定(bind)到 View 并定义提交操作。当我使用不正确的凭据运行提交操作时，它会重新加载应用程序。

为什么它会重新加载应用程序？Chrome 控制台显示:Navigated to http://localhost:3000/?就在“登录失败!!!”之后控制台消息。这会导致应用程序完全重新加载。因此，任何有关错误登录的屏幕错误消息和弹出窗口都会消失。它确实将最后一条错误消息打印到控制台“登录失败!!!”。之后，当提交函数退出时，它会导航到 URL 的根目录，从而导致完全重新加载。

我做错了什么？

var Authenticate = {
  controller, view
};

function controller() {
  this.info = m.prop("");
  this.data = {
    uname: m.prop(""),
    passw: m.prop(""),
    local: m.prop(false)
  };
  this.submit = () => {
    Login.auth(this.data).then(r => {
      if (this.data.uname() === r.data.uname) {
        var init = {
          uname: r.data.uname
        };
        router(init);
      } else {
        console.log("Login Mismatch !!!");
      }
    }, e => {
      if (e === 401) {
        console.log("Login Failure !!!");
        popa();
      } else {
        console.log(`Server Errror ${e} !!!`);
      }
    });
  };
}

非常感谢。

Answer 1

如果您使用 HTML form 元素，则提交始终会触发页面重新加载。您必须在此处preventDefault

m('form', {
  onsubmit: function(event) {
    event.preventDefault();
  }, 'form content'
})