1

我对主干 js 很陌生，在让我的应用程序的 pushstate 功能正常工作时遇到了一些问题。这是我的路线的一个例子：

var TodoRouter = new (Backbone.Router.extend({
    routes: {
        "": "index",
        "item/add": "AddTodoItem",
        "list/add": "AddTodoList"
    },
    AddTodoItem: function() {
        //e.preventDefault();
        alert("add new item");
    },
    AddTodoList: function(e) {
        //e.preventDefault();
        alert("add new list");
    },
    Start: function(){
            //note: my directory structure is localhost/playground/todo/
        Backbone.history.start({pushState: true, root: "/playground/todo/"});
    }, 
    initalize: function(){

    }, 
    index: function(){
        var todoListView = new TodoListView({ collection: TodoItemCollection });
    }
}));

这是我如何称呼我的路线：

$(function() {
    TodoRouter.Start();
});

最后是我如何称呼链接：

<a href="#list/add" id="newList">New List</a>

我遇到的问题是，当我调用链接时，页面保持不变，没有警报并且浏览器显示：

http://localhost/playground/todo/#list/add

现在这是有趣的部分，如果我刷新页面，url 变为：

http://localhost/playground/todo/list/add

我得到了警报。所以我有一种感觉，我在某处遗漏了一个关键点。任何帮助将不胜感激！

4

2 回答 2

1

你有pushState: true，这就是为什么它更喜欢斜杠/而不是哈希#

更改或删除哈希

于 2012-10-10T23:28:42.783 回答
0

您正在尝试使用 Backbone Routes 和 html5 pushState。

正如主干文档所说：

“如果您有 /documents/100 的路由，如果浏览器直接访问该 URL，您的 Web 服务器必须能够提供该页面。”

所以如果你想通过 uri( localhost/webapp/#about) 触发一些功能，你只需要使用 Backbone Routes。如果你想使用 Backbone Routes 和 pushState，你需要一个后端来回答对你可读 url ( localhost/webapp/about) 的请求，并且需要使用 backbone.navigate 方法来避免浏览器被理解<a href="#someRoute">为一个 html 锚。

在这里你可以看到一个完整的例子

您无法触发您的路线，因为当pushState:true它href="#route"具有与 html 锚点相同的行为时。

于 2013-09-24T02:01:39.740 回答