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 !!!”。之后，当提交功能退出时，它会导航到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：阻止提交时重新加载应用程序

1 个答案: