Как предотвратить маршрутизацию в Backbone.js?

Question

Когда я нажимаю "Отмена" на первой странице - все в порядке. Но "Отмена" не работает, когда я перехожу на "Вторая страница". В этом случае маршрутизатор перенаправляет приложение на "" маршрут. Мне нужно предотвратить это перенаправление.

"Отмена" - скрыть ссылки, "Вторая страница" - перейти на вторую страницу

<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>

Answer 1

Я думаю, что вы должны вернуть false из обработчика отмены, чтобы предотвратить переход к #:

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

http://api.jquery.com/on/ говорит:

Возвращение false из обработчика событий автоматически вызовет event.stopPropagation() и event.preventDefault().

Answer 2

Вы также можете решить проблему блокировки хеш-кодов многократным способом, как в этом ответе:

Запретить переход к другому представлению, если содержимое не сохранено

Это решение предотвращает срабатывание обратных вызовов маршрутизатора Backbone, и хотя он может работать только ПОСЛЕ изменения хеша, эта функция возвращает предыдущий фрагмент хеша, поэтому его нельзя заметить

---

Кроме того, для этой конкретной проблемы, вы можете просто изменить

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

к

<a>...</a>

он будет действовать как обычный тег HTML (например, курсор установлен на pointer) но никуда не денешься