Question

我对骨干j很新，我在使应用程序的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

现在这是有趣的部分，如果我刷新页面，网址就会变成：

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

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

Answer 1

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

更改或删除哈希

Answer 2

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

正如骨干文件所说：

“如果你有/ documents / 100的路由，你的网络服务器必须能够如果浏览器直接访问该网址，则提供该页面。“

因此，如果您想通过uri（localhost/webapp/#about）触发某些功能，您只需要使用Backbone Routes。如果你想使用Backbone Routes和pushState，你需要一个后端来回答对你的可读URL（localhost/webapp/about）的请求，并且需要使用backbone.navigate方法来避免浏览器理解{{1}作为一个html锚。

here你可以看到一个完整的例子

您无法触发路线，因为<a href="#someRoute">时pushState:true的行为与html锚点相同。

Backbone.js Pushstate：true不返回回调函数

2 个答案: