这似乎是一个流行的话题，但是，在尝试了 5 个不同答案中提出的几种解决方案后，我仍然无法得到正确的结果。我有一个简单的表单，将两个字段的输入附加到屏幕上。 “添加”按钮工作一次(显示输入的数据)，并且在第二次单击时不会触发其事件(我检查过 - 事件的渲染不再执行)。大多数建议的修复涉及在 View 的 render 方法末尾添加 this.delegateEvents() - 在我的情况下没有任何效果，也许我没有这样做正确的。我认为我正在做的事情比其他人必须解决的问题更简单。
我意识到整个事情的结构可以更好/不同，我只是按照其中一个教程进行操作，然后陷入了第二次点击问题。我只想知道: 1. 我的代码中到底是什么导致了该错误。 2. 如何克服它，最好不要重写整个事情。
谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Name List</title>
<link rel="stylesheet" href="name_book.css"/>
</head>
<body>
<div class="container"></div>
<div class="div_people"></div>
<hr>
<div class="div_inputs"></div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<!--template for the inputs-->
<script type="text/template" id="inputs">
Please enter name and city below:<br>
<form id="add_person_form" class="add_person_form">
<div id="div_input_name" class="input_name" style="float:left"><input id="input_name" type="text" /></div>
<div class="div_input_city" style="float:left"><input id="input_city" type="text" /></div>
<a href="#/add" class="input_submit_submit">Add</a>
</form>
</script>
<!--template for the screen output row-->
<script type="text/template" id="person_info">
<span class="person_name"><%= person_name %></span>
<span class=spacer></span>
<span class="person_city"><%= person_city %></span>
<br>
</script>
<script>
//class constructor
var Router = Backbone.Router.extend({
routes: {
'': 'home',
'add': 'addPerson'
}
});
var router = new Router();
var InputsList = Backbone.View.extend({
el: '.div_inputs',
render: function() {
var template = _.template($('#inputs').html(), {});
this.$el.append(template);
}
});
var inputsList = new InputsList();
router.on('route:home', function() {
inputsList.render();
});
var PeopleList = Backbone.View.extend({
el: '.div_people',
render: function() {
var template_person = _.template( $("#person_info").html(), {person_name: $("#input_name").val(), person_city: $("#input_name").val()} );
this.$el.append(template_person);
}
});
var peopleList = new PeopleList();
router.on('route:addPerson', function() {
peopleList.render();
});
Backbone.history.start();
</script>
</body>
</html>
最佳答案
如果路由#/add没有改变，那么就没有什么会触发改变。
如果您希望每次点击时都收到通知，则需要监听点击事件。
Backbone.View.extend({
events : {
"click .input_submit_submit" : "myCallbackOnClick"
},
myCallbackOnClick : function(ev) {
// <a> i was clicked
ev.preventDefault();
this.someOptionToRenderDifferently = true;
peopleList.render();
}
});
关于javascript - Backbone.js:为什么事件没有第二次触发(delegateEvents 没有帮助)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23747966/