【问题标题】:Backbone router navigate to .../#/<route> without triggering router event. How to?骨干路由器导航到 .../#/<route> 而不触发路由器事件。如何?
【发布时间】:2012-06-26 14:52:16
【问题描述】:

不知道如何强制主干正确导航到这样的路由:

页面/#/频道/名称

而不是

页面#频道/名称

页面#/频道/名称

我的路由器使用一个主要模型并观察其状态,因此在这种情况下路由器应该能够在不触发其事件的情况下更改 URL。

我试着这样做:

router.navigate("#/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });

但在这种情况下“触发器:假”不起作用,所以我收到了路由器事件的不良调用。

Backbone.history root 设置为“/”,我目前没有使用 pushState。

参见下面的代码示例:

var Router = Backbone.Router.extend({
    routes: {
        "": "index",            
        "index": "index",
        "channel/:channelName": "changeChannel"
    },

    initialize: function (options) {
        var router = this;

        if (options.model) {
            router.model = options.model;
        } else {
            //TODO: throw error
            return;
        }

        //update url in cases of model channelSelection changes
        router.model.on("stateChangeAccepted", function (appState) {
            switch (appState.mode) {
                case "channel":
                    router.navigate("/channel/" 
                        + encodeURIComponent(appState.data.channelName), { trigger: false });
                    break;                    
            }
        });
    },

    index: function () {
        var router = this;

        router.model.trigger("stateChangeRequest", {
            mode: "channel",
            data: {
                channelIndex: 0
            }
        });

    },

    changeChannel: function (channelName) {
        var router = this;

        router.model.trigger("stateChangeRequest", {
            mode: "channel",
            data: {
                channelName: decodeURIComponent(channelName)
            }
        });

    }
});

【问题讨论】:

  • 避免使用前导斜杠,所以不要使用 /page#/channel/ 而是使用 /page#channel。 Backbone 文档中记录了这样做会更好。这可能会解决您的问题
  • 我知道,不用斜线也能正常工作。我只是想获取 page/#/channel URL,类似于 Twitter

标签: javascript backbone.js


【解决方案1】:

您的router.navigate 呼叫与您定义的路由不匹配:

routes: {
  "": "index",            
  "index": "index",
  "channel/:channelName": "changeChannel"
},

这意味着频道的 URL 应该是 http://host.com/#channel/someChannel。但是,您的 router.navigate 调用是 router.navigate('#/channel...)router.navigate('/channel...)。应该是:

router.navigate("channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });

但是,如果您想使用 http://host.com/#/channel/someChannel 这样的路由,那么您的路由应该是:

routes: {
  "": "index",            
  "index": "index",
  "/channel/:channelName": "changeChannel"
},

你的导航电话应该是:

router.navigate("/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });

【讨论】:

  • 在这种情况下,我得到的 URL 是 page/#channel/someChannel,而不是 page/#/channel/someChannel。此外,现在这样生成的路由根本不会调用路由器操作(刷新页面时)
  • 你能展示一下你现在有什么阻止路由函数触发吗?在 Backbone.js 中,URL 采用host+"#"+route 的形式。如果您的路线是"/channel/:channelName",那么http://host.com/#/channel/someChannel 的URL 应该可以工作,尽管可能会发生其他事情
  • 我按照你的帖子中的描述做了一切:1. 将路由中的路由设置为“/channel/:channelName”:“changeChannel” 2. 导航到“/channel/...” 它没有t 调用适当的路由器事件...当我从两个点删除前导斜杠时,它工作正常。
  • 有趣。在那种情况下,看起来文森特·布里格利亚是对的。路线中的前导斜杠可能不起作用。文档说要避免使用它们:backbonejs.org/#Router-extend
猜你喜欢
  • 1970-01-01
  • 2011-12-28
  • 2012-06-12
  • 1970-01-01
  • 2013-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多