Backbone router.navigate() 给出 Failed to execute 'pushState' on 'History' 错误

Question

我正在尝试使用 Backbone 设置 link 和路由（这是我的第一个 Backbone 应用程序）。特别是，我想要 /restaurants/:id 形式的 link 来触发 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 link 时出现的特定错误是 Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///Users/adamzerner/code/getable_challenge/restaurants/c3' cannot be created in a document with origin 'null'.

我做错了什么？

Answer 1

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

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

Backbone router.navigate() 给出 Failed to execute 'pushState' on 'History' 错误

Backbone router.navigate() giving Failed to execute 'pushState' on 'History' error

javascript

backbone.js

backbone-routing