CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-eventsbackbone-routing
chessman
chessman

Reputation: 47

How to prevent routing in Backbone.js?

When I click 'Cancel' from First page - it's ok. But 'Cancel' doesn't work when I move to 'Second page'. In this case router redirects application to "" route. I need to prevent this redirection.

"Cancel" - hide links, "Second page" - move to Second page

<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"
    },

Create view and replace container's 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>

Upvotes: 3

Views: 3665

Answers (2)

Denes Papp
Denes Papp

Reputation: 3982

You can also solve blocking hash havigation in a reusable way like in this answer:

Prevent navigating to another view if contents are unsaved

This solution prevents Backbone router callbacks from firing, and though it can only run AFTER the hash has changed, this function sets the previous hash fragment back so it can't be noticed

Also, for this exeact problem, you can simply change from

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

To

<a>...</a>

it will act as a normal HTML anchor tag (e.g. cursor is set to pointer) but won't navigate anywhere

Upvotes: 2

biziclop
biziclop

Reputation: 14596

I think you should return false from the cancel handler to prevent navigation to #:

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

http://api.jquery.com/on/ says:

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault().

Upvotes: 3

Related Questions