如何防止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中的路由？

回答

相關問題