用户数据保存不止一次 [英] Saving User Data more than once
问题描述
我开始学习骨干JS，我只是有一些疑问。
荫与我下面code创建这个我的意思是用户表单 http://backbonetutorials.com/videos/beginner/#/new
情景1更新用户只有一次，但情景2 保存用户不止一次，我的意思是相同的用户信息获得存储不止一次在DB，总之它的触发' 提交事件不止一次，这是为什么发生这样呢？什么在后台发生在2以下的情景呢？
下面是code：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性
HREF =http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
/ * $。的getJSON（API /用户/ 1，功能（数据）{ 的console.log（数据）;
}）; * /
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体GT; ＆LT; DIV CLASS =容器＆GT;
＆LT; H1＆GT;用户管理器＆LT; / H1＆GT;
＆LT;小时/＆GT;
＆LT; DIV CLASS =页＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;脚本类型=文/模板ID =用户列表模板＆GT;
＆LT; A HREF =＃/新类=BTN BTN-小学＆gt;全新用户和LT; / A＆GT;
＆LT;小时/＆GT;
＆LT;表类=表剥离＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位＆gt;首先名称和LT; /第i
＆LT;第i个姓＆LT; /第i
＆LT;第i年龄和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT;％_.each（用户，功能（用户）{％GT;
＆所述; TR＆GT;
＆所述; TD＆GT;＆下;％= user.get（'的firstName'）％GT;＆下; / TD＆GT;
＆所述; TD＆GT;＆下;％= user.get（'的lastName'）％GT;＆下; / TD＆GT;
＆LT; TD＆GT;＆LT;％= user.get（'年龄'）％GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述;％}）; ％GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/模板ID =添加用户模板＆GT;
＆LT;窗体类=添加用户的形式＆GT;
＆LT;传奇＆GT;＆LT;％=用户？ '更新'：'创建'％GT;用户＆LT; /传说＆GT;
＆LT;标签＆gt;名＆LT; /标签＆gt;
＆LT;输入类型=文本名称=名字ID =名字值=＆LT;％=用户user.get（'的firstName'）：''％GT;/＆GT;
＆LT;标签＆gt;姓＆LT; /标签＆gt;
＆LT;输入类型=文本名称=姓氏ID =姓氏值=＆LT;％=用户user.get（'的lastName'）：''％GT; /＆GT;
＆LT;标签＆gt;＆年龄LT; /标签＆gt;
＆LT;输入类型=文本名称=年龄ID =年龄值=＆LT;％=用户user.get（'年龄'）：''％GT;/＆GT;
＆LT;小时/＆GT;
如果％（用户）{％GT;＆LT;
＆LT;输入类型=隐藏ID =ID值=＆LT;％= user.id％GT;＆GT;
＆LT;％}; ％GT;
＆LT;输入类型=提交值=？＆LT;％=用户'更新'：'创建'％gt;用户/＆GT;
＆LT; /表及GT;
＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js＆GT;＆下; /脚本＆GT;＆LT;脚本类型=文/ JavaScript的＆GT; VAR UsersList = Backbone.Collection.extend（{
网址：'API /用户
}）; VAR用户= Backbone.Model.extend（{
urlRoot：API /用户
}）; VAR UsersListView = Backbone.View.extend（{
EL：'。第'，
渲染：功能（）{
VAR认为这=;
VAR用户=新UsersList（）;
users.fetch（{
成功：函数（usersList）{
VAR模板= _.template（$（'＃用户列表模板）HTML（）。）（{用户：usersList.models}）;
。该$ el.html（模板）;
}
}）;
}
}）; VAR AddUserView = Backbone.View.extend（{
EL：'。第'，
渲染：功能（）{
的console.log（'创建用户...'）;
VAR模板= _.template（$（'＃添加用户模板）HTML（）。）（{用户：空}）;
这$ el.html（模板）;
}，
事件：{
提交。新增用户形式'：'saveOrUpdateUser
}，
saveOrUpdateUser：功能（E）{
亦即preventDefault（）;
VAR为userDetails = {姓：$（'＃姓名）VAL（），名字：$（'＃姓'）VAL（），年龄：。$（'＃时代）VAL（）};
VAR用户=新用户（）;
user.save（为userDetails，{
成功：功能（用户）{
的console.log（'INSIDE成功..'）;
router.navigate（''，{触发：真正的'}）;
}
}）;
}
}）; VAR路由器= Backbone.Router.extend（{
路线：{
''：'家'，
新：ADDUSER
}
}）;
场景1： //射击仅保存有一次，我的意思是它的工作完美
VAR usersListView =新UsersListView（）;
VAR addUserView =新AddUserView（）; VAR路由器=新路由器（）;
router.on（'路线：家，函数（）{
usersListView.render（）;
}）;
router.on（'路线：ADDUSER'，函数（）{
addUserView.render（）;
}）;
Backbone.history.start（）;
情景2： //用户数据保存不止一次，为什么???
VAR路由器=新路由器（）;
router.on（'路线：家，函数（）{
VAR usersListView =新UsersListView（）;
usersListView.render（）;
}）;
router.on（'路线：ADDUSER'，函数（）{
VAR addUserView =新AddUserView（）;
addUserView.render（）;
}）;
Backbone.history.start（）;
大声笑。我昨天刚回答了这个问题。貌似有人提醒他的教程，他是创造笔者的僵尸查看！
要回答你的问题，第一个方案工作的原因是因为你只创建有一个查看，然后使用你的路由器来呈现的相同的视图。但是，如果你看的情景2 每有随后的时间你遵循的路线 #NEW 创建另一个 AddUserView 视图和你渲染视图。过去所有的意见不要走开，因为他们仍然听着他们管理的DOM元素的一些事件。你的情况，你有
事件：{
提交。新增用户形式'：'saveOrUpdateUser
}
所以每个渲染视图听＆LT;提交方式＆gt; 按钮元素
看看这个答案，骨干JS型号保存不止一次的，了解更多信息。当然，千万不要错过德里克贝利的经典文章<一个href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/apps%2F&ei=1FfAVNT7CMamggSYpYHgAQ&usg=AFQjCNEP8_EpNm9a5ygpvsRfviq-izWdIA&sig2=0CjkIi18LepD8b64BIbEcQ&bvm=bv.83829542,d.eXY\"相对=nofollow>僵尸！跑！ （董事总经理网页过渡骨干企业应用套件）。 （顺便说一句，使用德里克的木偶，一个非常活跃的，稳定的和良好的支持骨干框架，你会在您的处置有大量的工具来帮助你避免僵尸的观点）。
I started learning Backbone JS, I just had some doubt.
Iam creating this with my below code I mean this user form http://backbonetutorials.com/videos/beginner/#/new
Scenario 1 Updating User only Once, BUT Scenario 2 Saving user more than once, I mean same user details getting stored more than once in DB, in short its triggering 'submit' event more than once, WHY is that happening like that? Whats happening in background in case of below 2 scenarios?
Below is the code:
<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>
</tr>
<% }); %>
</tbody>
</table>
</script>
<script type="text/template" id="add-user-template">
<form class="add-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" id="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 UsersList = Backbone.Collection.extend({
url: 'api/users'
});
var User = Backbone.Model.extend({
urlRoot: 'api/users'
});
var UsersListView = Backbone.View.extend({
el: '.page',
render: function(){
var that = this;
var users = new UsersList();
users.fetch({
success: function(usersList){
var template = _.template($('#user-list-template').html())({users: usersList.models});
that.$el.html(template);
}
});
}
});
var AddUserView = Backbone.View.extend({
el: '.page',
render: function(){
console.log('Creating User...');
var template = _.template($('#add-user-template').html())({user:null});
this.$el.html(template);
},
events: {
'submit .add-user-form': 'saveOrUpdateUser'
},
saveOrUpdateUser: function(e){
e.preventDefault();
var userDetails = {firstName: $('#firstname').val(), lastName: $('#lastname').val(), age: $('#age').val()};
var user = new User();
user.save(userDetails,{
success: function(user){
console.log('INSIDE SUCCESS..');
router.navigate('',{trigger: 'true'});
}
});
}
});
var Router = Backbone.Router.extend({
routes:{
'':'home',
'new':'addUser'
}
});
SCENARIO 1: // Firing Save only Once, I mean its working perfectly.
var usersListView = new UsersListView();
var addUserView = new AddUserView();
var router = new Router();
router.on('route:home',function(){
usersListView.render();
});
router.on('route:addUser',function(){
addUserView.render();
});
Backbone.history.start();
SCENARIO 2: // Saving User Data More than Once, Why???
var router = new Router();
router.on('route:home',function(){
var usersListView = new UsersListView();
usersListView.render();
});
router.on('route:addUser',function(){
var addUserView = new AddUserView();
addUserView.render();
});
Backbone.history.start();
Lol. I just answered this question yesterday. Looks like someone has to alert the author of his tutorial that he's creating Zombie Views!
To answer you question, the reason the first scenario works is because you create only one view and then use your router to render that same view. But if you'll look at Scenario 2 there every subsequent time you follow the route #new you create another AddUserView view and you're rendering that view. All your past views do not go away because they are still listening to events in some element of the DOM they manage. In your case, you have
events: {
'submit .add-user-form': 'saveOrUpdateUser'
}
so each rendered view is listening to the <submit> button element.
Check out this answer, Backbone js Model Save more than once, for more details. And of course, don't miss Derick Bailey's classic article Zombies! RUN! (Managing Page Transitions In Backbone Apps). (BTW, using Derick's Marionette, a very active, stable and well supported Backbone Framework you'll have plenty of tools at your disposal to help you avoid zombie views).
这篇关于用户数据保存不止一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
