Я пытаюсь настроить ссылки и маршрутизацию с помощью 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'.
Что я делаю не так?
