[英]Implement toggle in Backbone.js events
我想在Backbone中实现可逆动画,就像在jquery中一样:
$('a.contact').toggle(
function(){
// odd clicks
},
function(){
// even clicks
});
我的问题是如何在骨干网事件语法中做到这一点? 如何模仿功能,功能设置?
events : {
'click .toggleDiv' : this.doToggle
},
doToggle : function() { ??? }
Backbone的视图事件直接委托给jQuery,并允许您通过回调方法访问所有标准DOM事件参数。 因此,您可以轻松地在元素上调用jQuery的toggle方法:
Backbone.View.extend({
events: {
"click a.contact": "linkClicked"
},
linkClicked: function(e){
$(e.currentTarget).toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
}
});
我一直在寻找解决此问题的方法,而我只是以老式的方式进行处理。 我还希望能够从应用程序中的其他视图中找到我的hideText()方法。
因此,现在我可以从任何其他视图检查'showmeState'的状态,并根据我要使用的方法运行hideText()或showText()。 我试图通过删除诸如render和initialize之类的内容来简化下面的代码,以使示例更加清晰。
var View = Backbone.View.extend({
events: {
'click': 'toggleContent'
},
showmeState: true,
toggleContent: function(){
if (this.showmeState === false) {
this.showText();
} else {
this.hideText();
}
},
hideText: function() {
this.$el.find('p').hide();
this.showmeState = false;
},
showText: function() {
this.$el.find('p').show();
this.showmeState = true;
}
});
var view = new View();
您是否要在视图中切换的元素接收事件? 如果是这样的话:
doToggle: function() {
this.$("a.contact").toggle()
}
我实际上相信唯一使用events
执行此操作的方法是添加trigger
,以使实际流程保持在一起。 坦白地说,以这种方式使用切换似乎有点笨拙。
Backbone.View.extend({
events: {
"click .button": "doToggle"
},
doToggle: function(e){
var myEle = $(e.currentTarget);
$(e.currentTarget).toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
myEle.trigger('click');
}
});
仅使用它可能更清洁
Backbone.View.extend({
el: '#el',
initalize: function() {
this.render();
},
doToggle: {
var myEle = this.$el.find('.myEle');
myEle.toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
},
render: function(e){
//other stuff
this.doToggle();
return this;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.