如何防止在主干网中路由.js

How to prevent routing in Backbone.js?

本文关键字：路由 js 主干网 何防止      更新时间：2023-09-26

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

"取消" - 隐藏链接，"第二页" - 移至第二页

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

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

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

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

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

您还可以以可重用的方式解决阻塞哈希问题，如以下答案：

如果内容未保存，则阻止导航到其他视图

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

另外，对于此执行问题，您可以简单地从

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

自

<a>...</a>

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

相关文章：