[英]How do I call a backbone view event only once?
I have a backbone view that looks like this: 我有一个看起来像这样的骨干视图:
var myView = Backbone.view.extend({
events: {'click .myClass': 'myFunction'},
initialze: //initialize function,
render: //render function,
myFunction: function (e) {
//do something
}
});
I want to make myFunction
work only one time, then stop being called. 我想让myFunction
只工作一次,然后停止被调用。 I believe I could use the backbone once() method to achieve this but can't figure it out. 我相信我可以使用骨干一次()方法来实现这一点,但无法解决。 Is this the best way and how do I structure it? 这是最好的方法,如何组织它? Thanks! 谢谢!
Simply replace your current definition: 只需替换您当前的定义:
myFunction: function(){....}
by 通过
myFunction: _.once(function(){....})
myFunction may be called several times, but it will be a noop after the first call. myFunction可能会被调用多次,但是在第一次调用后将变为noop。
View events are bound using delegateEvents
and that uses the delegation form of jQuery's on
. View事件是使用delegateEvents
事件绑定的,并且使用jQuery的on
的委托形式。 That means that the event to handler mapping is dynamic and can be manipulated by manipulating the DOM. 这意味着事件到处理程序的映射是动态的,可以通过操纵DOM进行操纵。 For example, you could do this: 例如,您可以这样做:
Backbone.View.extend({
events: {
'click .myClass.onlyOnce': 'doThings'
},
doThings: function(e) {
$(e.currentTarget).removeClass('onlyOnce');
//...
},
//...
});
and make sure that the .myClass
element also has an onlyOnce
class. 并确保.myClass
元素也具有onlyOnce
类。 Then, the first time you click on it, it will match .myClass.onlyOnce
and the click will get routed to doThings
; 然后,第一次单击它时,它将匹配.myClass.onlyOnce
并且该点击将被路由到doThings
; doThings
then proceeds to remove the onlyOnce
class and do whatever needs to be done. 然后, doThings
继续删除onlyOnce
类,并执行需要做的所有事情。 Subsequent clicks on .myClass
will be clicks on something that does not match .myClass.onlyOnce
so doThings
won't be called again. 对.myClass
后续点击将是对与.myClass.onlyOnce
不匹配的.myClass.onlyOnce
点击,因此不会再次调用doThings
。
This approach has the nice advantage of self documenting its behavior in events
. 这种方法具有很好的优势,可以自我记录events
行为。
Demo: http://jsfiddle.net/ambiguous/7KJgT/ 演示: http : //jsfiddle.net/ambiguous/7KJgT/
You could add an attribute to the element the first time, and then check if the element has the attribute: 您可以在第一次为元素添加属性,然后检查元素是否具有该属性:
var myView = Backbone.view.extend({
events: {'click .myClass': 'myFunction'},
initialze: //initialize function,
render: //render function,
myFunction: function (e) {
if(e.target.getAttribute("data-fired")) return;
e.target.setAttribute("data-fired", true);
// Do your stuff
}
});
You could add a class to the element to validate your condition. 您可以将一个类添加到元素中以验证您的条件。
var myView = Backbone.view.extend({
events: {
'click .myClass': 'myFunction'
},
initialze: //initialize function,
render: //render function,
myFunction: function (e) {
if (e.target.className.search(/triggered/) !== -1) return; // event already triggered once
e.target.className += "triggered";
//do something when its triggered first time
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.