如何防止Backbone.js中的路由？

当我点击第一页的'取消' - 没关系。但是当我移动到'第二页'时，'取消'不起作用。在这种情况下，路由器将应用重定向到路由。我需要防止此重定向。如何防止Backbone.js中的路由？

“取消” - 隐藏链接，“第二页” - 移动到第二页

<script type="text/html" id="template"> 
    <a href="#" class="cancel">Cancel</a> 
    <a href="#second">Second page</a> 
</script> 

<div id="container"></div>  

<script> 
var View = Backbone.View.extend({ 

    template: $('#template').html(), 

    events: { 
     "click .cancel": "cancel" 
    }, 

    cancel: function() { 
     this.$el.hide(); 
    }, 

    render: function() { 
     this.$el.html(this.template); 
     return this; 
    } 
}); 

var AppRouter = Backbone.Router.extend({ 

    routes: { 
     "": "first", 
     "second": "second" 
    },

创建视图并更换容器的HTML

links: function() { 
     var view = new View; 
     $('#container').html(view.render().el); 
    }, 

    second: function() { 
     this.links(); 
     $('#container').prepend("<h1>Second page</h1>"); 
    }, 

    first: function() { 
     this.links(); 
     $('#container').prepend("<h1>First page</h1>"); 
    } 

}); 

$(document).ready(function() { 
    app = new AppRouter; 
    Backbone.history.start(); 
}); 
</script>

来源

2012-06-26 chessman

只是e.preventDefault（） – rcarvalho

我想你应该从取消处理程序返回false防止导航#：

cancel: function (e) { 
     this.$el.hide(); 
     return false; 
    },

http://api.jquery.com/on/说：

返回false从事件处理程序将自动调用 event.stopPropagation（）和event.preventDefault（）。

来源

2012-06-26 12:06:14 biziclop

谢谢，它的工作原理！ – chessman

如果这不起作用呢？在我的函数的开始，我已经e.preventDefault（）;但路由器仍然被触发 – SKuijers

我发现它为什么不起作用。这是因为我的观点没有定义。例如：var view = Backbone.View.extend（{el：$（“＃anElement”），等等。}）; – SKuijers

您也可以解决这个答案在一个可重用的方式阻止哈希havigation像：

Prevent navigating to another view if contents are unsaved

该解决方案可以防止骨干路由器回调烧制而成，尽管它只能运行在哈希已经改变之后，该函数将之前的哈希片段设置回来，以便它不能被注意到

此外，这个exeact问题，你可以简单地从

<a href="#">...</a>

改为

<a>...</a>

它将作为一个普通的HTML锚标记（例如光标设置为pointer）但不会导航任何地方

来源

2014-07-02 15:47:57

如何防止Backbone.js中的路由？

回答

相关问题