javascript - 主干 router.navigate() 给出 Failed to execute 'pushState' on 'History' 错误

Question

我正在尝试使用 Backbone 设置链接和路由(这是我的第一个 Backbone 应用程序)。特别是，我想要一个 /restaurants/:id 形式的链接来触发 show 路由。

这是我的代码:

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();
})

当我点击 /restaurants/:id 链接时，我得到的特定错误是 Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL ' file:///Users/adamzerner/code/getable_challenge/restaurants/c3' 无法在原点为“null”的文档中创建。

我做错了什么？

Answer 1

可能的问题是您没有在服务器上运行它。您需要使用 MAMP 或 WAMP 或 Node 等设置本地服务器，这样您最终将通过浏览器访问位于 localhost:8080 等位置的页面。这将允许您加载本地内容，如 JSON 文件。

如果这不能解决您的问题，请尝试查看 Javascript history.PushState not working?