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>

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>

• javascript
• backbone.js
• backbone-events
• backbone-routing

Share Improve this question Follow asked Jun 26, 2012 at 11:59 chessmanchessman 4722 silver badges66 bronze badges 1

• just e.preventDefault() – rcarvalho Commented Jul 2, 2014 at 18:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./on/ says:

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

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