Mithriljs：防止在提交时重新加载完整的应用程序

Question

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

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

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

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

为什么会重新加载应用程序？？ Chrome 控制台说：Navigated to http://localhost:3000/? 就在 "Login Failure !!!" 控制台消息之后。这会导致完整的应用程序重新加载。因此，任何关于错误登录的屏幕错误消息和弹出窗口都会消失。它确实将最后一条错误消息打印到控制台 "Login Failure !!!"。之后，当提交函数退出时，它导航到 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'
})

Mithriljs：防止在提交时重新加载完整的应用程序

Mithriljs: prevent full application reload on submit

javascript

mithril.js