[英]Backbone event doesn't always happen on `el`
I'm working on my own version of a Backbone TodoMVC App. 我正在开发自己的Backbone TodoMVC App版本。 Here's my code so far.
到目前为止,这是我的代码 。
The Backbone events hash allows us to attach event listeners to either el-relative custom selectors, or directly to el if no selector is provided .
Backbone事件哈希允许我们将事件侦听器附加到el相对的自定义选择器, 或者如果未提供选择器,则直接附加到el 。 An event takes the form of a key-value pair 'eventName selector': 'callbackFunction' and a number of DOM event-types are supported, including click, submit, mouseover, dblclick and more.
事件采用键值对“ eventName selector”的形式:“ callbackFunction”,并且支持许多DOM事件类型,包括单击,提交,鼠标悬停,dblclick等。
http://addyosmani.github.io/backbone-fundamentals/
http://addyosmani.github.io/backbone-fundamentals/
'dblclick': 'showEdit'
doesn't seem to be happening on el
for me. 'dblclick': 'showEdit'
似乎并没有发生在el
身上。
When I double click somewhere in the inner .view-mode
div, $(e.target)
is that .view-mode
div. 当我双击内部
.view-mode
div中的某个位置时, $(e.target)
是该.view-mode
div。
But when I click outside of .view-mode
but inside of the li
, $(e.taret)
is what it should be. 但是,当我在
.view-mode
但在li
内单击时,应该是$(e.taret)
。
Why is this? 为什么是这样?
Code: 码:
todo.js todo.js
var app = app || {};
app.TodoView = Backbone.View.extend({
tagName: 'li',
className: 'list-group-item',
template: _.template( $('#todo-template').html() ),
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
this.$el.find('.edit-mode').hide();
this.$el.find('.remove-todo').hide();
return this;
},
events: {
'click input[type="checkbox"]': 'check',
'mouseenter': 'showRemove',
'mouseleave': 'hideRemove',
'click .remove-todo': 'remove',
'dblclick': 'makeEditable'
},
check: function(e) {
var id = $(e.target).data('id');
var model = app.todos.get(id);
model.save({
completed: true
});
},
showRemove: function(e) {
$(e.target).find('.remove-todo').show();
},
hideRemove: function(e) {
$(e.target).find('.remove-todo').hide();
},
remove: function(e) {
var $el = $(e.target);
var id = $(e.target).data('id');
var model = app.todos.get(id);
model.destroy({
success: function(model) {
app.todos.remove(model);
$el.closest('li').remove();
},
error: function() {
alert('Unable to remove todo.');
}
});
},
makeEditable: function(e) {
console.log($(e.target).html());
$(e.target).find('.view-mode').hide();
$(e.target).find('.edit-mode').show();
}
});
todo template 待办事项模板
<script type='text/template' id='todo-template'>
<div class='view-mode'>
<input
type='checkbox'
data-id='<%= id %>'
<% if (completed) { %>checked<% } %>
>
<%= title %>
<a data-bypass class='remove-todo' data-id='<%= id %>'>×</a>
</div>
<div class='edit-mode'>
<p>Edit Mode</p>
</div>
</script>
e.target
refers to the node on which the event occurred. e.target
是指事件发生的节点。 Event propagation means this may be descendent of the node that your handler is attached to. 事件传播意味着这可能是您的处理程序附加到的节点的后代。
To get the node that the event handler is attached to, use e.currentTarget
. 要获取事件处理程序附加到的节点,请使用
e.currentTarget
。
See Event.currentTarget
on MDN . 请参阅MDN上的
Event.currentTarget
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.