我正在做这个骨干教程：http://www.youtube.com/watch?v=HsEw2i4wQMM
，但我遇到了一些服务器端问题，即GET和PUT功能。
我已将以下文件上传到我的服务器：https://github.com/thomasdavis/video-backbone-beginner-server
我的演示网站是http://mywebbdesigner.com/adressbook/index.html
控制台记录用户ID路由的404 Get错误
我的PUT功能会记录这些项目，但不保存它们。
我不知道我错过了什么.. 如果您能提供帮助，请查看网络和控制台日志
感谢您的帮助！
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>adressbook</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section class="container simpel-adressbook">
<h1 class="app-title"><a href="#">Adressbook</a></h1>
<div class="row">
<div class="contents container"></div>
</div>
</section>
<script type="text/template" id="user-list-template">
<article class="span5 user-list">
<h2>Contact list:</h2>
<ul>
<% _.each(users, function(user) { %>
<li>
<a href=""> <!--// #/users/<%= user.id %>-->
<span><%= user.get('firstname') %></span>
<span><%= user.get('lastname') %></span>
<span><%= user.get('age') %></span>
<span><a href=" #/edit/<%= user.id %>" class="btn"> Edit </a></span>
</a>
</li>
<% }); %>
</ul>
<a href="#/new" class="btn btn-primary">Lägg till</a>
</article>
<article class="span5">
<h2>Contact details:</h2>
<div class="details"></div>
</article>
</script>
<script type="text/template" id="edit-user-template">
<div class="container">
<article class="span5">
<form class="edit-user-form">
<legend><%= user ? 'Updte' : 'Create' %> User</legend>
<label>First Name</label>
<input type="text" name="firstname" value="<%= user ? user.get('firstname') : '' %>"></input>
<label>Last Name</label>
<input type="text" name="lastname" value="<%= user ? user.get('lastname') : '' %>"></input>
<label>Age</label>
<input type="text" name="age" value="<%= user ? user.get('age') : '' %>"></input>
<button type="submit" class="btn btn-secondary">Create user</button>
</form>
</article>
</div>
</script>
<script type="text/template" id="user-details-template">
<h2>Contact details:</h2>
<% _.each(users, function(user) { %>
<p>
<span><%= user.get('firstname') %></span>
<span><%= user.get('lastname') %></span>
<span><%= user.get('adress') %></span>
<span><%= user.get('postcode') %></span>
<span><%= user.get('city') %></span>
</p>
<% }); %>
<a href="#/edit" class="btn btn-primary">Lägg till</a>
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!--script src="bower_components/jquery/jquery.js"></script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<script>
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = 'http://mywebbdesigner.com/adressbook' + options.url;
});
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var Users = Backbone.Collection.extend({
url: '/users'
});
var User = Backbone.Model.extend({
urlRoot: '/users'
});
var UserList = Backbone.View.extend({
el: '.contents',
render: function () {
var that = this;
var users = new Users();
users.fetch({
success: function (users) {
var template = _.template($('#user-list-template').html(), {users: users.models});
that.$el.html(template);
}
})
}
});
var EditUser = Backbone.View.extend({
el: '.contents',
render: function (options) {
var that = this;
if(options.id) {
var user = new User({id: options.id});
user.fetch({
success: function (user) {
var template = _.template($('#edit-user-template').html(), {user: user});
that.$el.html(template);
}
})
} else {
var template = _.template($('#edit-user-template').html(), {user: null});
this.$el.html(template);
}
},
events: {
'submit .edit-user-form': 'saveUser'
},
saveUser: function(ev) {
var userDetails = $(ev.currentTarget).serializeObject();
var user = new User();
user.save(userDetails, {
success: function (user) {
router.navigate('', {trigger: true});
console.log(user);
}
})
return false;
}
});
var UserInfo = Backbone.View.extend({
el: '.details',
render: function () {
var template = _.template($('#user-details-template').html(), {});
this.$el.html(template);
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'home',
'new': 'editUser',
'users/:id': 'userInfo',
'edit/:id': 'editUser',
}
});
var userList = new UserList();
var editUser = new EditUser();
var userInfo = new UserInfo();
var router = new Router();
router.on('route:home', function () {
userList.render();
});
router.on('route:editUser', function (id) {
editUser.render({id: id});
});
router.on('route:userInfo', function () {
console.log('show details');
userInfo.render();
});
Backbone.history.start();
</script>
</body>
</html>
答案 0 :(得分：1)
问题不在于您的客户端代码，而是与服务器有关。
您可以通过浏览器执行GET来检查 - list GET工作正常但item GET失败。 original server.js看起来很好，所以我建议首先仔细检查服务器上的那个是否相同，然后如果不是这样，请关注userDetails（）函数，看看你是否能找到失败的原因，可能是在本地运行server.js ......