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启动导航并调用家庭功能。

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）阻止网址更改; 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;
}

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

1 个答案: