3

当我从首页单击“取消”时 - 没关系。但是当我移至“第二页”时，“取消”不起作用。在这种情况下，路由器将应用程序重定向到“”路由。我需要防止这种重定向。

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

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

2 回答 2

3

我认为您应该从取消处理程序返回 false 以防止导航到#：

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

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

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

于 2012-06-26T12:06:14.030 回答
2

您还可以像在这个答案中那样以可重用的方式解决阻塞哈希havigation ：

如果内容未保存，则阻止导航到另一个视图

此解决方案可防止 Backbone 路由器回调触发，虽然它只能在哈希更改后运行，但此函数会将先前的哈希片段设置回来，因此不会被注意到

此外，对于这个确切的问题，您可以简单地从

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

到

<a>...</a>

它将充当普通的 HTML 锚标记（例如，光标设置为pointer），但不会在任何地方导航

于 2014-07-02T15:47:57.440 回答