javascript - 由于表单/模型中未保存的数据，取消 Backbone 中的路由

Question

我有以下代码。它生成一个带有简单文本字段的表单。

<div class="nav-bar">
    <a href="#home">Home</a>
    <a href="#showform">Click here for the form</a>
</div>

<div id="theform">
    <form>
        <input type="text" name="data" id="data" />
        <input type="submit">
    </form>
</div>

用户输入一些数据后，他点击主页链接。Backbone 启动导航并调用 home 函数。

var AppRouter = Backbone.Router.extend({
    routes: {
        "home": "home",
        "showform": "showtheform",
    },

    home: function() {
      if (current_view) {
        cuttent_view.remove();
      }

      current_view = new View_Home();
    },

    showtheform: function() {
      // Code to show the form
    }
});

在处理程序之后，表单消失了，未保存的更改仍然未保存（但之后无法保存）。在路由器功能中返回false不会影响任何事情，网址仍然会发生变化。我如何 a) 防止 url 更改和 b) 询问用户是否要保存未保存的更改？

Answer 1

您可以在视图中绑定一个处理程序并在触发路由器之前执行您的逻辑。好处将是更好的封装，因为验证是视图/模型而不是路由器的关注点

events: {
  "click a": "validateSave"
},
validateSave: function(){
  // check if we prompted to save already
  // if not return false and show a message;
}

// you can intercept other navigation events by guarding your routes like so.
...
someRoute: function() {
  if(this.savePrompt() { return; } 
  // show a different view
},
savePrompt: function() {
   if(!current_view.validateSave || !current_view.validateSave()) { return false; }
   if(this.history.length < 2) { return false; }

   // go back silently and replace last route in history
   this.navigate(this.history[this.history.length-2], {replace: true});

   return true;
}