Backbone router.navigate() 给出 无法在“历史记录”错误上执行“pushState”

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

本文关键字:历史记录 记录 历史 错误 pushState 执行 navigate router 给出 Backbone      更新时间:2023-09-26

>我正在尝试使用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' cannot be created in a document with origin 'null'.

我做错了什么?

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

如果这不能解决你的问题,试着看看Javascript的历史。推送状态不起作用?