Javascript 主干路由器.navigate（）无法执行'；pushState'；在'；历史'；错误

我正在尝试使用主干网设置链接和路由（这是我的第一个主干网应用程序）。特别是，我需要一个

/restaurants/:id

形式的链接来触发

显示

路线

这是我的代码：

var App = {
    Models: {},
    Views: {},
    Collections: {}
};

// RESTAURANT SCHEMA
// name
// type
// rating (average) - virtual attribute
// points
// ratings
App.Models.Restaurant = Backbone.Model.extend({
    urlRoot: '/restaurants',
    defaults: {
        points: 0,
        ratings: 0
    },
    updateRating: function(points) {
        this.set({points: points});
        this.set({ratings: this.get('ratings') + 1});
        this.rating.set({
            rating: this.get('points') / this.get('ratings')
        });
        this.save(); // PUT /restaurants/:id            PUT if model exists, POST if not
    }
});

App.Collections.Restaurants = new (Backbone.Collection.extend({
    model: App.Models.Restaurant,
    url: '/restaurants'
}))();

App.Views.Restaurant = Backbone.View.extend({
    template: _.template(
        '<div class="page-header"><h1><%= name %></h1></div>' + 
        '<p>Type: <%= type %></p><br />' + 
        '<label>Enter rating: </label>' + 
        '<input type="number" class="form-control" min="1" max="5">'
    ),
    events: {
        'change input[type=number]': 'updateRating'
    },
    updateRating: function() {
        var points = this.$el.$(); // TODO
        this.model.updateRating(points);
    },
    render: function() {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    }
});

App.Views.Restaurants = Backbone.View.extend({
    template: _.template(
        '<div class="page-header"><h1>Restaurants</h1></div>' + 
        '<ul>' +
            '<% App.Collections.Restaurants.forEach(function(restaurant){ %>' +
                '<li><a href="restaurants/<%= restaurant.cid %>"><%= restaurant.get("name") %></a></li>' + // using cid's like this doesn't seem right. I think I need to get the id after saving to the database, but I haven't done that yet.
            '<% }); %>' +
        '</ul>'
    ),
    render: function() {
        this.$el.html(this.template());
    },
    events:  {
        'click a': function(e) {
            e.preventDefault();
            App.Router.navigate(e.target.pathname, {trigger: true});
        }
    }
});

App.Router = Backbone.Router.extend({
    routes: {
        "restaurants": "index",
        "restaurants/:id": "show",
        "restaurants/new": "new",
        "restaurants/:id/edit": "edit"
    },
    initialize: function() {
        console.log('initialize called');
        var PicolaBusala = new App.Models.Restaurant({
            name: "Picola Busala",
            type: "Italian"
        });
        var Benihanna = new App.Models.Restaurant({
            name: "Benihanna",
            type: "Asian"
        });
        var LemonLeaf = new App.Models.Restaurant({
            name: "Lemon Leaf",
            type: "Thai"
        });
        var picolaBusala = new App.Views.Restaurant({model: PicolaBusala});
        var benihanna = new App.Views.Restaurant({model: Benihanna});
        var lemonLeaf = new App.Views.Restaurant({model: LemonLeaf});
        App.Collections.Restaurants.add(PicolaBusala);
        App.Collections.Restaurants.add(Benihanna);
        App.Collections.Restaurants.add(LemonLeaf);
        App.Views.restaurantsView = new App.Views.Restaurants({collection: App.Collections.Restaurants});
        App.Views.restaurantsView.render();
        $("#app").html(App.Views.restaurantsView.el);
    },
    start: function() {
        console.log('start called');
        Backbone.history.start({pushState: true});
    },
    index: function() {
        console.log('index called');
        App.Collections.Restaurants.fetch();
        $("#app").html(App.Views.restaurantsView.el);
    },
    show: function(id) {
        console.log('show called');
        console.log('id: ', id);
    },
    new: function() {

    },
    edit: function() {

    }
});

$(function() {
    App.Router = new App.Router(); // because a) initialize() needs to be called once the DOM loads and b) App.Router needs to be instantiated for .navigate()
    App.Router.start();
})

var-App={
型号：{}，
视图：{}，
集合：{}
};
//餐厅模式
//名字
//类型
//评级（平均）-虚拟属性
//要点
//评级
App.Models.Restaurant=Backbone.Model.extend({
urlRoot:“/restaurants”，
默认值：{
分数:0,，
评分：0
},
更新：函数（点）{
this.set（{points:points}）；
set（{ratings:this.get（'ratings'）+1}）；
这是一套({
评级：this.get（'points'）/this.get（'ratings'））
});
this.save（）；//PUT/restaurants/：id如果模型存在则放置，如果模型不存在则发布
}
});
App.Collections.Restaurants=新建（Backbone.Collection.extend({
型号：App.Models.Restaurant，
url:“/餐厅”
}))();
App.Views.Restaurant=Backbone.View.extend({
模板：\ u0.template(
'' + 
“类型：

”
“输入评级：”+
''
),
活动：{
“更改输入[类型=编号]”：“更新”
},
更新：函数（）{
var points=this.$el.$（）；//待办事项
this.model.updateing（点）；
},
render:function（）{
var attributes=this.model.toJSON（）；
this.el.html（this.template（attributes））；
}
});
App.Views.Restaurants=Backbone.View.extend({
模板：\ u0.template(
"食肆"
“
”+
'' +
“
”+//像这样使用cid似乎不正确。我想我需要在保存到数据库后获取id，但我还没有这样做。
'' +
“
”
),
render:function（）{
this.el.html（this.template（））；
},
活动：{
“单击a”：函数（e）{
e、 预防默认值（）；
App.Router.navigate（e.target.pathname，{trigger:true}）；
}
}
});
App.Router=Backbone.Router.extend({
路线：{
“餐厅”：“索引”，
“餐厅/：id”：“展示”，
“餐厅/新”：“新”，
“餐厅/：id/edit”：“编辑”
},
初始化：函数（）{
log（'initializecalled'）；
var PicolaBusala=新App.Models.Restaurant({
名称：“皮科拉·布萨拉”，
字体：“意大利语”
});
var Benihanna=新App.Models.Restaurant({
姓名：“Benihanna”，
类型：“亚洲”
});
var LemonLeaf=新App.Models.Restaurant({
名称：“柠檬叶”，
类型：“泰语”
});
var picolaBusala=新的App.Views.Restaurant（{model:picolaBusala}）；
var benihanna=新的App.Views.Restaurant（{model:benihanna}）；
var lemonLeaf=新的App.Views.Restaurant（{model:lemonLeaf}）；
App.Collections.Restaurants.add（PicolaBusala）；
应用程序。收藏。餐厅。添加（Benihanna）；
应用程序。收藏。餐厅。添加（柠檬叶）；
App.Views.restaurantsView=新建App.Views.Restaurants（{collection:App.Collections.Restaurants}）；
App.Views.restaurantsView.render（）；
$（“#app”）.html（app.Views.restaurantsView.el）；
},
开始：函数（）{
log（'start called'）；
Backbone.history.start（{pushState:true}）；
},
索引：函数（）{
log（'index called'）；
App.Collections.Restaurants.fetch（）；
$（“#app”）.html（app.Views.restaurantsView.el）；
},
显示：功能（id）{
log（'show called'）；
console.log（'id:'，id）；
},
新：函数（）{
},
编辑：函数（）{
}
});
$（函数（）{
App.Router=new App.Router（）；//因为a）加载DOM后需要调用initialize（），b）App.Router需要为.navigate（）实例化
App.Router.start（）；
})

单击

/restaurants/：id

链接时出现的特定错误是

Uncaught SecurityError:未能对“History”执行“pushState”：具有URL的历史状态对象file:///Users/adamzerner/code/getable_challenge/restaurants/c3“无法在来源为“null”的文档中创建。”

---

我做错了什么？

可能的问题是您没有在服务器上运行此操作。例如，您需要使用MAMP、WAMP或Node之类的东西设置本地服务器，这样您就可以通过浏览器在

localhost:8080

这样的位置访问页面。这将允许您像加载JSON文件一样加载本地内容

如果这不能解决你的问题，试着看看