我刚刚学习Backbone JS，下面是我不了解如何做PUT请求的代码。它不断发送请求为'POST'，如何进行'PUT'操作。请建议我在代码中需要做哪些更改：
实际上我试图练习这个视频：https://www.youtube.com/watch?v=FZSjvWtUxYk，我只是坚持'更新'操作。
输出如下所示：http://backbonetutorials.com/videos/beginner/#/edit/i4zofel9gi7aq64ggxsu
在上面的链接中，'update'操作效果很好。但是对我来说，请点击“更新”按钮后再请求“PUT”，而不是“POST”。请告诉我出了什么问题。
仅供参考，我使用'Server'作为'Java Code即DAO，Restful service'
以下是代码：
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type="text/javascript">
/*$.getJSON('api/users/1',function(data){
console.log(data);
});*/
</script>
</head>
<body>
<div class="container">
<h1>User Manager</h1>
<hr/>
<div class="page"></div>
</div>
<script type="text/template" id="user-list-template">
<a href="#/new" class="btn btn-primary">New User</a>
<hr>
<table class="table stripped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<% _.each(users,function(user) { %>
<tr>
<td><%= user.get('firstName') %></td>
<td><%= user.get('lastName') %></td>
<td><%= user.get('age') %></td>
<td><a href="#/edit/<%= user.id %>" class="btn">Edit</a></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
<script type="text/template" id="edit-user-template">
<form class="edit-user-form" >
<legend><%= user ? 'Update' : 'Create' %> User</legend>
<label>First Name</label>
<input type="text" name="firstname" id="firstname" value="<%= user ? user.get('firstName') : '' %>"/>
<label>Last Name</label>
<input type="text" name="lastname" id="lastname" value="<%= user ? user.get('lastName') : '' %>" />
<label>Age</label>
<input type="text" name="age" id="age" value="<%= user ? user.get('age') : '' %>"/>
<hr/>
<% if(user) { %>
<input type="hidden" name="id" value="<%= user.id %>">
<% }; %>
<input type="submit" value="<%= user ? 'Update' : 'Create' %> User" />
</form>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
var Users = Backbone.Collection.extend({
url: 'api/users'
});
var User = Backbone.Model.extend({
urlRoot: 'api/users'
})
var UserList = Backbone.View.extend({
el:'.page',
render: function(){
var that = this;
var users = new Users();
users.fetch({
success: function(usersList){
var template = _.template($('#user-list-template').html())({users: usersList.models});
that.$el.html(template);
}
});
}
});
var EditUser = Backbone.View.extend({
el: '.page',
render: function(options){
if(options.id){
var that = this;
var user = new User({id:options.id});
user.fetch({
success: function(user){
console.log('Updating User...');
var template = _.template($('#edit-user-template').html())({user: user});
that.$el.html(template);
}
});
} else {
console.log('Creating User...');
var template = _.template($('#edit-user-template').html())({user: null});
this.$el.html(template);
}
},
events:{
'submit .edit-user-form':'saveUser'
},
saveUser : function(e){
e.preventDefault();
var user = new User({id: $('#id').val()});
var userDetails = {firstName: $('#firstname').val() ,lastName: $('#lastname').val() ,age: $('#age').val() };
user.save(userDetails,
{
success : function(user){
console.log('INSIDE SUCCESS..')
router.navigate('',{trigger:'true'});
},
type: 'put'
});
}
})
var Router = Backbone.Router.extend({
routes:{
'':'home',
'new': 'editUser',
'edit/:id': 'editUser'
}
});
var userList = new UserList();
var editUser = new EditUser();
var router = new Router();
router.on('route:home',function(){
console.log('we have loaded the home page.');
userList.render();
});
router.on('route:editUser',function(id){
console.log('Show User Form.');
editUser.render({id:id});
});
Backbone.history.start();
</script>
</body>
</html>
答案 0 :(得分：1)
看起来分配给模型id属性的值为undefined - 因此Backbone认为您要创建新模型 - 并发送POST请求。
对于Backbone发送PUT请求，我们不需要显式传递HTTP方法的名称，我们只需要在调用save()之前为模型指定有效的id属性。 / p>
我看到你正试图在行上的saveUser()方法中做到这一点
var user = new User({id: $('#id').val()});
但是，模板片段中没有{id} id这样的元素。我希望您实际上尝试使用name'id'来隐藏输入元素中的值？
<input type="hidden" name="id" value="<%= user.id %>">
但由于您没有获得该值，因此您的模型现在具有id的{{1}}属性。
引擎盖Backbone通过调用模型上的isNew()指定适当的HTTP方法。像这样（取自backbone source code）
undefined当我们调用method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
时，您的模型返回true，因此传递给sync()方法的方法参数为'create'，因此发送POST请求。我们可以通过快速测试来看到这一点
isNew()您可以通过将选择器更改为此类
来检查所有这些var model = new Backbone.Model();
model.set({id: undefined});
model.isNew(); // returns true
如果可行，我们就发现了问题。然后，我尝试序列化表单输入，而不是使用jQuery选择器来获取特定值 - 因为这是一种更好的方法。